Как получить данные JSON с помощью Vue и Axios

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

Как следует из предупреждений, сделайте следующее:

1. Переименуйте массив данных с results на products, так как вы ссылаетесь на него последним как на имя во время рендеринга.
2. Сделайте ваш параметр данных функцией, возвращающей объект, поскольку параметр данных должен быть функцией, чтобы каждый экземпляр мог поддерживать независимую копию возвращенного объекта данных.Посмотрите на документы по этому вопросу.

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>