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

我试图从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文件获取数据时，因为以下操作有效：

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

---

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

将数据数组从

results

重命名为

products

，因为在渲染过程中，后者将其作为名称引用

将数据选项设置为返回对象的函数，因为数据选项必须是函数，这样每个实例都可以维护返回数据对象的独立副本。看看这个

Vue.component（'products'）{
数据（）{
返回{
产品：[]
}
},
安装的（）{
axios
.get（“js/prods.json”）
。然后（响应=>{
this.products=response.data.products；
});
},
模板：`
//...
`
}

...

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

产品名称：vue

导出默认值{
名称：'产品'，
数据（）{
返回{
产品：[]
}
},
安装的（）{
axios
.get（“js/prods.json”）
。然后（响应=>{
this.products=response.data.products；
});
}
}

然后在主JS文件或任何需要此组件的地方：

从“./components/Products.vue”导入产品；
新Vue({
el:“#应用程序”，
数据（）{
返回{
//...
}
},
组成部分：{
产品
}
})

您在控制台中看到了什么？此外，您将希望

v-for

而不是

产品

，除非这是一个打字错误……控制台显示以下内容：“数据”选项应该是一个函数，在组件定义中返回每个实例的值。和
vue.js:616[vue warn]：属性或方法“产品”未在实例上定义，但在呈现过程中引用。请通过初始化属性，确保此属性在“数据”选项中或在基于类的组件中是被动的。请参阅：。在-->中找到：。是否使用CDN运行Vue？否。我下载了它。Vue和Axios都正常工作。问题不在于文件。下面是ing在控制台

axios.get（'/js/products.json'）。然后（函数（响应）{console.log（响应）；}）。catch（函数（错误）{console.log（错误）；}）。然后（函数（）{//always executed}）；

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