Vue.js caches data when rendering the list v for?

The page displays a list like that, he just has the number and buttons to add and subtract to cart
also, there are navigation buttons that change the list of products in the basket and this list is loaded via ajax and simply replaced in a variable, and vue renders him again
<div v-for="item in products">
{{item.name}}
 <template v-if="item.count==0">
 <button>add to cart</button>
</template>
 <template v-else>
 <button @click="item.count--">-</button> {{item.count}} <button @click="item.count++">+</button>
</template>
</div>


Everything works fine for one but when you call new list of products, Vue renders this list of products and displays the new name in the item.name, but the item.count ceases to be reactive and preserves the value of the previous product. Although looking at the Dev tools Vue, where the value changes correctly, but the render in the DOM not working
March 19th 20 at 09:20
1 answer
March 19th 20 at 09:22
Solution
Vue does not cache, it builds a virtual Dom, compares it with the previous status and if there are changes it rebuilds already real. In your case, most likely due to the fact that there is no keys, the dif is broken and Vue decides that no change or count declare something crooked and it does not become reactive. Add the keys and values ajax prithivi products like: this.products = Object.assign({}, ajaxProducts) it must assign vrevskii reactive getters/setters for all properties of the object.
@choupa, Thank you! Helped assigned :key array v for the button and then wrapped in another component - melisa.Nol commented on March 19th 20 at 09:25

Find more questions by tags Vue.jsJavaScript