Bagaimana untuk memanggil json dalam vuejs-View.js-php.cn

Bagaimana untuk memanggil json dalam vuejs

藏色散人

Lepaskan： 2021-11-01 11:44:41

asal

2691 orang telah melayarinya

Kaedah memanggil json dalam vuejs: 1. Letakkan json dalam folder statik 2. Buat objek 3. Gunakan kaedah axios untuk memperkenalkan alamat.

Bagaimana untuk memanggil json dalam vuejs

Persekitaran pengendalian artikel ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Bagaimana untuk melaraskan json dalam vuejs?

Cara menggunakan VUE untuk memanggil json tempatan:

Pada mulanya, saya fikir ia akan menjadi lebih mudah untuk menggunakan vue untuk memanggil json Trouble, saya pergi ke Baidu dahulu apabila saya selesai, dan mencari beberapa, dan melihat bahawa mereka perlu mengkonfigurasi konfigurasi ini dan itu, yang membuatkan saya berasa pening, kerana sesetengah orang yang mempunyai pemikiran dan logik yang jelas pasti tidak akan mengalami situasi ini.

Biar saya bercakap tentang situasi saya di bawah, dan anda boleh menggantikannya mengikut situasi

Sudah tentu, jika anda baru mula mencipta Vue, anda perlu mengkonfigurasi perkara yang saya maksudkan di bawah adalah bagaimana projek anda boleh Apabila ia berjalan, cuba cari cara untuk merujuk json selepas ia selesai Sudah tentu, saya juga menggunakan kaedah pemerolehan axios di sini Jika kaedah ini tidak digunakan, anda boleh mencubanya

Pertama sekali, anda perlu tahu json anda Folder mana yang patut diletakkan (rujukan biasa) Jika anda ingin menulis dengan spesifikasi anda sendiri, anda boleh melakukannya dengan cara anda sendiri. Saya melihat beberapa di Internet diletakkan dalam folder yang berbeza Nampaknya saya tidak perlu mengkonfigurasi sesuatu, tetapi dalam mod standard adalah lebih baik untuk meletakkannya dalam folder statik anda, seperti yang ditunjukkan di atas

Bagaimana untuk memanggil json dalam vuejs

Jika ia tidak diletakkan dalam folder ini, ralat mungkin dilaporkan!

Data json mesti ditulis mengikut spesifikasi

{
  "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"
  }
  ] }

Salin selepas log masuk

Selepas json ditulis, ia perlu diimport. Cari cara untuk memanggil data ini alamat, ia mestilah http:/ /localhost:8080/static/ceshi.json Format ini

<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>

Salin selepas log masuk

<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>

Salin selepas log masuk

Disyorkan: "

Pilihan tutorial video 5 vue.js terkini "

Atas ialah kandungan terperinci Bagaimana untuk memanggil json dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!