Vue.js - Elements not displaying

Question

I have created an API call using axios and want to display it using Vue.js. But it doesn't display anything. Its like the elements are not rendered. I checked the elements console and the elements isn't there.

Code:

        <div class="row" id="item-data">
            <div class="col-lg-4 col-md-6" v-for="items in data" >
                <a href="#" class="latest-product__item">
                    <div class="latest-product__item__pic">
                        <img src="img/latest-product/lp-1.jpg" alt="">
                    </div>
                    <div class="latest-product__item__text">
                        <h6>{{items.item_name}}</h6>
                        <div v-for="variant in items.variants">
                            <div v-for="store in variant.stores">
                                <span>{{store.price}}</span>
                            </div>
                         </div>
                    </div>
                </a>
            </div>
        </div>

Vue.js Code:

  window.onload = function () {
  const access_token = "231231212412zcaqe";

  new Vue({
    el: '#item-data',
    data () {
      return {
        data:[]
      }
    },
    mounted () {
      axios.get('https://cors-anywhere.herokuapp.com/https://api.loyverse.com/v0.7/items', {
        headers : {
          Authorization: 'Bearer ' + access_token
        },
        params: {
          limit: 10
        }
      })
        .then(function (response) {
          // handle success
          this.data = response.data.items
          console.log(this.data);
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        })
        .then(function () {
          // always executed
        });

    }
  })
}

Are you sure `this` is what it’s supposed to be here? It’s a common issue. — Sami Kuhmonen, Jun 04 '20 at 10:34
You should replace your normal `function(reponse)` with arrow functions - `(response) =>` — IVO GELOV, Jun 04 '20 at 10:35
I have tried the things you suggested, but still no display. — Ryan, Jun 04 '20 at 10:37
Does this answer your question? [Vue - Calling store getter after dispatch completes?](https://stackoverflow.com/questions/54525205/vue-calling-store-getter-after-dispatch-completes) — Boussadjra Brahim, Jun 04 '20 at 10:37
Don't just use the arrow functions try to get to know what you are doing https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this / https://caniuse.com/#feat=arrow-functions — Jenne, Jun 04 '20 at 10:37
I have replaced the function(response) with arrow functions, like @IVOGELOV suggested, but still no displays — Ryan, Jun 04 '20 at 10:39
Thank you! I figured it out, i retained the this.data and replaced function(response) with the arrow functions. Thank you! — Ryan, Jun 04 '20 at 10:42
Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — AT82, Jun 04 '20 at 18:44

score 0 · Answer 1 · answered Jun 04 '20 at 10:48

0

Thank you for answering!

I managed to fix this by replacing function(response) with (response) =>

answered Jun 04 '20 at 10:48

Ryan

179
1
1
14

Vue.js - Elements not displaying

1 Answers1