@nikilex

Как можно реализовать динамическое изменение класса в vue на множестве элементов?

Здравствуйте, подскажите, пожалуйста, у меня есть массив сообщений в чате и я их вывожу в цикле, так же хочу реализовать выделение сообщения путем добавления и удаления класса isActive тэгу "i", я никак не могу сообразить по документации, если я делаю переменную одну, то у меня выделяются все сообщения, а как сделать что-то типа чекбоксов?
<div v-for="msg in msgs" >
  <div :data-id="msg.id" @click="addToArrBeforeDeleteMsg">
    <i v-bind:class="[{ 'isActive': item[msg.id], 'checkMsg':true, 'far': true, 'fa-check-circle': true } ]"></i> 
  </div>
</div>

export default {
    data() {
     msgs: [{id:1},{id:2},{id:3}...]
     item: []
     }
methods: {
 addToArrBeforeDeleteMsg(e) {
                   this.item[e.target.dataset.id] = true
                }
        },
}
}

.isActive {
    display: inline-block!important;
    color: rgba(53, 87, 97, 1)!important;
    font-size: 20px;
}
  • Вопрос задан
  • 111 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы