How to call json in vuejs-Vue.js-php.cn

How to call json in vuejs

藏色散人

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

Original

2642 people have browsed it

How to call json in vuejs: 1. Place json in the static folder; 2. Create the object; 3. Use the axios method to introduce the address.

How to call json in vuejs

The operating environment of this article: windows7 system, vue2.9.6 version, DELL G3 computer.

How to adjust json in vuejs?

How to use VUE to call local json:

At the beginning, I thought how easy it would be to use vue to call json Trouble, I went to Baidu first when I was done, and looked for a few, and saw that they had to configure this configuration and that, which made me feel dizzy, as someone with clear thinking and logic would definitely not have this happen.

Let me talk about my situation below. You can substitute it according to the situation.

Of course, if you just start creating Vue, you need to configure things. What I am talking about below is how your project can When it is running, try to find a way to reference json after it is finished. Of course, I am also using the axios acquisition method here. If it is not this method, you can use it.

First of all, you need to know your json Which folder should it be placed in (ordinary reference)? If you want to write with your own specifications, you can do it in your own way. I saw a few on the Internet placed in different folders. It seems that I need to configure something. I didn't look carefully. But in standard mode, it is best to put them in your static folder, as shown in the picture above

How to call json in vuejs

If it is not placed in this folder, an error may be reported!

json data must be written in specifications

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

Copy after login

After the json is written, it needs to be imported. Find a way to call the data. Since it is a local connection address, it must be http://localhost. :8080/static/ceshi.json This format

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

Copy after login

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

Copy after login

The above is the detailed content of How to call json in vuejs. For more information, please follow other related articles on the PHP Chinese website!