[Vuejs]-Vue component is mounted but not displaying

by

0👍

✅

One problem is when you are trying to bind the key on the v-for loop. The key should be something that is unique to each item in the loop:

https://v2.vuejs.org/v2/guide/list.html#Maintaining-State

Try something like this instead:

<div  v-for="(product,key) in products" v-bind:key="product.id"  class="col-md-4 col-sm-6 col-xs-6">

Or instead of id you can use any other property that is guaranteed to be unique on each product.

And another issue, like Adam said in the comments, is that you already have a product defined in your data() property, and then you are also calling each item in the loop product. You should assign unique names that don’t conflict with each other.

Leave a comment