@Sector567

Как реализовать такую логику во vue без document.querySelector?

Как избавиться от document.querySelector, за который все ругаются во vue, но при этом чтобы логика была сохранена?
Вот код
https://codepen.io/Crot/pen/wvMmjZm
  • Вопрос задан
  • 131 просмотр
Решения вопроса 4
0xD34F
@0xD34F Куратор тега Vue.js
Добавьте стили:

.child.red {
  background: red;
}

Обработчик клика пусть выглядит так: @click="n.em = !n.em".

А назначение класса так: :class="{ red: n.em }".
Ответ написан
@dGololobov
начинающий
Один из способов: можно выводить цвет прямо в аттрибут style в зависимости от значения
<div class="child" :style="`background: ${(!!n.em) ? 'blue' : 'red'};`">{{ i + 1 }}</div>

click (i) {
       this.items[i].em = !this.items[i].em
}
Ответ написан
yarkov
@yarkov Куратор тега Vue.js
https://github.com/yarkovaleksei/toster-extension
new Vue({
   el: '#app',
   data: {
     items: [{em: true},{em: true},{em: true}]
   },
    methods:{
      click(item) {
         item.em = !item.em
      }
    }
})


<div id="app">
  <div class="wrap">
    <div class="item" v-for="(item, i) in items" :key="i">
      <div class="parent" @click="click(item)">
        {{item.em}}
        <div class="child" :class="`class${i}`" :style="{background: item.em ? 'blue' : 'red'}">{{ i + 1 }}</div>
      </div>
    </div>
  </div>
</div>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
firedragon
@firedragon
Senior .NET developer
Правильно ругаются. Сделайте контрол, который меняет состояние переменной isOn дальше в стиле используйте условный оператор это есть в документации.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы