[Vuejs]-Vue.js component array misrenders when replaced with shorter array

0👍

Ok, I figured it out: It’s all about the v-bind:key. I realized that I’m binding to an attribute that isn’t provided by the API I’m fetching data from. Reference that to a (real and) unique attribute for each component and the problem goes away.

I did notice that the List Rendering Documentation mentions that

In 2.2.0+, when using v-for with a component, a key is now required.

Interestingly, the JSBin I linked above notably uses Vue.js version 2.0.3 but the problem still exists there and is fixed by proper use of the key attribute in the v-for loop.

If anyone else wants to see that, look at the JSBin linked in the question and add a v-bind:key="zone.id" to the <tr> element. The problem is resolved after that.

Leave a comment