vuejs: как изменить класс каждого элемента в v-for - PullRequest
Новая
       9

vuejs: как изменить класс каждого элемента в v-for

0 голосов
/ 22 мая 2018

У моего компонента шаблона есть img 

<img src="img/loading.gif" :data-src="url" class="live-snapshot-img" :class="{lazy:true, 'lazy-loaded': false}">

Когда он рендерится, я вызову ленивое событие.Класс изменится на «ленивый» с «ленивый». 

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

Затем, если данные изменились, я хочу, чтобы класс снова вернулся в «ленивый».Связь: класс не работает.

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Мое решение - создать метод в компоненте 

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

и изменить img на 

<img src="img/loading.gif" :data-src="url" class="live-snapshot-img" :class="lazyload()">
0 голосов
/ 22 мая 2018

Я думаю, что вы подходите к этому немного неправильно.У вас правильная идея, но я чувствую, что ваше мышление и пост jQuery отражают манеру манипуляции, а не то, что это плохо, просто не подходит для этой ситуации.Vue работает немного по-другому.Если вы хотите изменить класс после события в этом конкретном экземпляре, вы привязываете свой класс: к переменной в компоненте vue.

Если бы я хотел, чтобы это произошло, я бы, вероятно, начал с установки переменныхв моем компоненте данных для государства.(см .: Привязки классов и стилей ) 

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

Затем привяжите это к своему элементу: 

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

Затем вы можете манипулировать imageState в ваших компонентных методах вкак хочешь.

...