[Vuejs]-Vuejs: How to change the class of each item in v-for

by

0👍

I think you’re approaching this in slightly the wrong way. You have the right idea, but I feel like your thinking and jQuery post render dom manipulation manner, not that this is bad, just not right for this situation. Vue works a little differently. If you want to change the class after the event in this particular instance, you bind your :class to a variable in your vue component.

If I wanted to make this happen, I would probably start by setting a variables in my component data for the state. (see: Class and Style Bindings)

Vue.component('my-component-name', {
     data: function () {
          return {
               imageState: {'lazy': true, 'lazy-loaded': false}
          }
     }
})

Then bind that to your element:

<img src="img/loading.gif" :data-src="url" class="live-snapshot-img" :class="imageState">

You can then manipulate the imageState in your component methods in any way you want.

👤Russell Shingleton

0👍

My solution is
Create a method in component

    lazyload: function() {
        var clazz = {lazy: true, 'lazy-loaded': false}
        clazz['dummy' + Math.random()] = true
        return clazz
    },

and change the img to

<img src="img/loading.gif" :data-src="url" class="live-snapshot-img" :class="lazyload()">
👤eale

Leave a comment