[Vuejs]-V-for is re-rendering all the components when a class changes

0👍

Try using a unique value you already have in your channel collection: ChName seems a good candidate.

<div is="Channel" v-for="(channel,index) in channels" :key="channel.ChName" :channel="channel"></div>

This should help vue understand what have changed and what not, and re-render accordingly.


Also, please avoid using vanilla javascript to select element inside vue.

I am referring to:

var images = document.querySelectorAll("div > div > div > div > img");

Which should probably converted to something like:

var images = this.channels.map(ch => ch.Image)

Leave a comment