title: How do I fetch JSON data with Vue and Axios
body: <p>I'm trying to fetch product data from a JSON file, but can't get it to work.
  I've tried several things and searched the internet for a solution but none of the examples on the internet equals my situation.
  I'm new to both vue and axios, so please excuse my ignorance.</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>Vue.component('products',{
  data: {
      results: []
  },
  mounted() {
      axios.get("js/prods.json")
      .then(response =&gt; {this.results = response.data.results})
  },
  template:`
  &lt;div id="products"&gt;
  &lt;div class="productsItemContainer" v-for="product in products"&gt;
              &lt;div class="productsItem"&gt;
                  &lt;div class=""&gt;
                      &lt;div class="mkcenter" style="position:relative"&gt;
                          &lt;a class="item"&gt;
                              &lt;img class="productImg" width="120px" height="120px" v-bind:src="'assets/products/' + product.image"&gt;
                              &lt;div class="floating ui red label" v-if="product.new"&gt;NEW&lt;/div&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="productItemName" &gt;
                      &lt;a&gt;{{ product.name }}&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="mkdivider mkcenter"&gt;&lt;/div&gt;
                  &lt;div class="productItemPrice" &gt;
                      &lt;a&gt;€ {{ product.unit_price }}&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div v-on:click="addToCart" class="mkcenter"&gt;
                      &lt;div class="ui vertical animated basic button" tabindex="0"&gt;
                          &lt;div class="hidden content"&gt;Koop&lt;/div&gt;
                          &lt;div class="visible content"&gt;
                              &lt;i class="shop icon"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      `
  })
  new Vue({
  el:"#app",
  });
  </code></pre>
  
  <p>The json file is as follows</p>
  
  <pre><code>{
      "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
          }
      ]
  }
  </code></pre>
  
  <p>The problem is only with the fetching of the data from a JSON file, because the following worked:</p>
  
  <pre><code>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.........
  </code></pre>