Question

我正在尝试从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.........

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

如何使用Vue和Axios提取JSON数据

1 个答案:

Products.vue