vuejsでjsonを呼び出す方法-Vue.js-php.cn

vuejsでjsonを呼び出す方法

藏色散人

リリース： 2021-11-01 11:44:41

オリジナル

2693 人が閲覧しました

vuejs で json を呼び出す方法: 1. json を静的フォルダーに配置します; 2. オブジェクトを作成します; 3. axios メソッドを使用してアドレスを導入します。

vuejsでjsonを呼び出す方法

この記事の動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vuejs で json を調整するにはどうすればよいですか?

VUE を使用してローカル JSON を呼び出す方法:

最初は、vue を使えばどんなに簡単だろうと思いました。 json Trouble を呼び出すために、作業が終わってからまず Baidu にアクセスし、いくつか検索したところ、あれやこれやの構成を設定する必要があることがわかり、めまいを感じました。明確な思考と論理を持っている人なら間違いなくそうすることはできないでしょう。これが起こります。

以下、私の状況について話します。状況に応じて置き換えてください。

もちろん、Vue を作り始めたばかりであれば、設定が必要です。以下はプロジェクトの実行方法です実行中は、終了後に json を参照する方法を探してみてください。もちろん、ここでも axios の取得メソッドを使用しています。このメソッドでなくても、それを使用できます。

まず、json を知る必要がありますどのフォルダーに配置するか (通常の参照) 独自の仕様で書きたい場合は、独自の方法で記述できます。インターネット上でいくつかのファイルが別のフォルダーに置かれているのを見ました。何か設定する必要があるようです。注意深く見ていませんでした。しかし、標準モードでは、上の図に示すように、それらを静的フォルダーに置くのが最善です

vuejsでjsonを呼び出す方法

このフォルダーに配置されていない場合、エラーが報告される可能性があります。

json データを仕様書に記述する必要があります

{
  "status":"0",
  "result":[
   {
     "productId":"10001",
     "productName":"小米6",
     "prodcutPrice":"2499",
     "prodcutImg":"mi6.jpg"
   },
   {
    "productId":"10002",
    "productName":"小米笔记本",
    "prodcutPrice":"3999",
    "prodcutImg":"note.jpg"
   },
   {
    "productId":"10003",
    "productName":"小米6",
    "prodcutPrice":"2499",
    "prodcutImg":"mi6.jpg"
   },
   {
    "productId":"10004",
    "productName":"小米6",
    "prodcutPrice":"2499",
    "prodcutImg":"1.jpg"
   },
   {
    "productId":"10001",
    "productName":"小米6",
    "prodcutPrice":"2499",
    "prodcutImg":"mi6.jpg"
  },
  {
   "productId":"10002",
   "productName":"小米笔记本",
   "prodcutPrice":"3999",
   "prodcutImg":"note.jpg"
  },
  {
   "productId":"10003",
   "productName":"小米6",
   "prodcutPrice":"2499",
   "prodcutImg":"mi6.jpg"
  },
  {
   "productId":"10004",
   "productName":"小米6",
   "prodcutPrice":"2499",
   "prodcutImg":"1.jpg"
  }
  ] }

ログイン後にコピー

json を記述した後、インポートする必要があります。データを呼び出す方法を見つけます。ローカル接続アドレスなので、 http://localhost.:8080/static/ceshi.json この形式は

<script>
  import axios from &#39;axios&#39;
  export default{
    data(){
      return {
        res:"",//创建对象
             
      }
    },
    mounted () {
     this.getGoodsList()
    },
    methods: {
     getGoodsList () {
      this.$axios.get(&#39;http://localhost:8080/static/ceshi.json&#39;).then((res) => {
        //用axios的方法引入地址
        this.res=res
        //赋值
       console.log(res)
      })
     }
    }
  }
</script>

ログイン後にコピー

<div class="hello">
   <el-table
      :data="res.data.result"
      border
      style="width: 100%">
      <el-table-column
      fixed
      prop="productId"
      label="日期"
      width="150">
      </el-table-column>
      <el-table-column
      prop="productName"
      label="岗位"
      width="120">
      </el-table-column>
      <el-table-column
      prop="prodcutPrice"
      label="手机号"
      width="120">
      </el-table-column>
      <el-table-column
      prop="prodcutImg"
      label="姓名"
      width="120">
      </el-table-column>      
    </el-table>
  
  
 </div>

ログイン後にコピー

推奨: 「最新の 5 つの vue.js ビデオチュートリアルセレクション」

以上がvuejsでjsonを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。