如何使用 Vue 和 Axios 获取 JSON 数据答案

【问题标题】：How do I fetch JSON data with Vue and Axios如何使用 Vue 和 Axios 获取 JSON 数据
【发布时间】：2019-07-03 15:50:28
【问题描述】：

我正在尝试从 JSON 文件中获取产品数据，但无法正常工作。我已经尝试了几件事并在互联网上搜索了解决方案，但互联网上没有一个示例与我的情况相同。我对vue和axios都是新手，所以请原谅我的无知。

这是我目前所拥有的：

Vue.component('products',{
data: {
    results: []
},
mounted() {
    axios.get("js/prods.json")
    .then(response => {this.results = response.data.results})
},
template:`
<div id="products">
<div class="productsItemContainer" v-for="product in products">
            <div class="productsItem">
                <div class="">
                    <div class="mkcenter" style="position:relative">
                        <a class="item">
                            <img class="productImg" width="120px" height="120px" v-bind:src="'assets/products/' + product.image">
                            <div class="floating ui red label" v-if="product.new">NEW</div>
                        </a>
                    </div>
                </div>
                <div class="productItemName" >
                    <a>{{ product.name }}</a>
                </div>
                <div class="mkdivider mkcenter"></div>
                <div class="productItemPrice" >
                    <a>€ {{ product.unit_price }}</a>
                </div>
                <div v-on:click="addToCart" class="mkcenter">
                    <div class="ui vertical animated basic button" tabindex="0">
                        <div class="hidden content">Koop</div>
                        <div class="visible content">
                            <i class="shop icon"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `
})
new Vue({
el:"#app",
});

json文件如下

{
    "products":[
        {
            "name": "Danser Skydancer",
            "inventory": 5,
            "unit_price": 45.99,
            "image":"a.jpg",
            "new":true
        },
        {
            "name": "Avocado Zwem Ring",
            "inventory": 10,
            "unit_price": 123.75,
            "image":"b.jpg",
            "new":false
        }
    ]
}

问题仅在于从 JSON 文件中获取数据，因为以下方法有效：

Vue.component('products',{
    data:function(){
        return{
            reactive:true,
            products: [
           {
            name: "Danser Skydancer",
            inventory: 5,
            unit_price: 45.99,
            image:"a.jpg",
            new:true
          },
          {
            name: "Avocado Zwem Ring",
            inventory: 10,
            unit_price: 123.75,
            image:"b.jpg",
            new:false
          }
            ],
          cart:0
        }
    },
   template: etc.........

【问题讨论】：

您在控制台中看到了什么？另外，你会想要v-for results 而不是products，除非那是一个错字...
控制台显示如下：vue.js:616 [Vue warn]：“data”选项应该是一个在组件定义中返回每个实例值的函数。
and
vue.js:616 [Vue 警告]：属性或方法“products”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：vuejs.org/v2/guide/…。在 ---> 中找到
你在用 CDN 运行 Vue 吗？
不，我下载了。 Vue 和 Axios 都可以正常工作。问题不在于文件。下面在控制台中显示正确的数据axios.get('/js/products.json') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }) .then(function () { // always executed });

标签： javascript vue.js axios

【解决方案1】：

如警告所示，请执行以下操作：

将数据数组从 results 重命名为 products，因为您在渲染期间将后者作为名称引用。
将数据选项设为返回对象的函数，因为数据选项必须是函数，这样每个实例都可以维护返回的数据对象的独立副本。看看这个the docs。

Vue.component('products', {
  data() {
    return {
      products: []
    }
  },

  mounted() {
    axios
      .get("js/prods.json")
      .then(response => {
        this.products = response.data.products;
      });
  },

  template: `
    //...
  `
}

<div id="products">
  <div class="productsItemContainer" v-for="product in products">
    <div class="productsItem">
 ...

另外，由于您没有使用 CDN（我认为），我建议将模板制作为具有单独 Vue 文件的组件，而不是在模板文字中进行，类似这样：

Products.vue

<template>
  <div id="products">
    <div class="productsItemContainer" v-for="product in products">
      <div class="productsItem">
        <!-- The rest of the elements -->

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Products',

    data() {
      return {
        products: []
      }
    },

    mounted() {
      axios
        .get("js/prods.json")
        .then(response => {
          this.products = response.data.products;
        });
    }
  }
</script>

然后在你的主 JS 文件或其他任何需要这个组件的地方：

import Products from './components/Products.vue';

new Vue({
  el: '#app',

  data() {
    return {
      //...
    }
  },

  components: {
    Products
  }
})

<div id="app">

  <Products />

</div>

【讨论】：