Переключение классов отдельных элементов li нажатием на v-for - PullRequest
Новая
       7

Переключение классов отдельных элементов li нажатием на v-for

0 голосов
/ 27 января 2019

После часа безуспешных попыток внедрить этот ответ в мое приложение я решил обратиться за помощью сюда.Мой класс li предметов не будет переключаться, и я не могу понять, почему.Вот мой код:

HTML: 

<li :class="classObject(event)" v-for="event in events" @click="showEvent(event)">
  ...
</li>

JS: 

methods: {
  classObject(event) {
    return {
      active: event.active,
      'event': true
    };
  },
  showEvent: function(event) {
    event.active = !event.active;
  }
},
mounted() {
  axios.get(this.eventsJsonUrl)
    .then(response => {
      this.events = response.data;
      this.events.map((obj) => {
        obj.active = false;
        return obj;
      })
    })
}

Обратите внимание, что мой массив events объекта изначально не имеет активного свойства,Я добавляю его в mounted hook.

На всякий случай вот console.log результирующего массива events:

enter image description here

1 Ответ

0 голосов
/ 27 января 2019

Сделайте класс зависимым от переменной следующим образом: 

<li class="event" :class="{ active: event.active }" v-for="event in events" @click="showEvent(event)">
  ...
</li>

Где функция showEvent переключает переменную event.active, как у вас уже есть.

РЕДАКТИРОВАТЬ: см. Этот jsfiddleчтобы увидеть, что это работает: https://jsfiddle.net/84zhx1et/

РЕДАКТИРОВАТЬ 2: я вижу, что идет не так в вашем примере сейчас: вы пытаетесь динамически добавить активное свойство к событиям, но VueJs не будет запускать это изменение,Вы можете установить это свойство так, чтобы VueJs повторно отображал события: 

  this.events.map((obj) => {
    this.$set(obj, 'active', false)
  })

Смотрите этот JsFiddle, который использует этот метод: https://jsfiddle.net/84zhx1et/1/

...