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

Question

[Sector567]

Как избавиться от document.querySelector, за который все ругаются во vue, но при этом чтобы логика была сохранена?
Вот код
https://codepen.io/Crot/pen/wvMmjZm

Answer 1

[0xD34F]

Добавьте стили:

.child.red {
  background: red;
}

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

А назначение класса так: :class="{ red: n.em }".

Answer 2

[Дмитрий Гололобов]

Один из способов: можно выводить цвет прямо в аттрибут style в зависимости от значения

<div class="child" :style="`background: ${(!!n.em) ? 'blue' : 'red'};`">{{ i + 1 }}</div>

click (i) {
       this.items[i].em = !this.items[i].em
}

Answer 3

[Алексей Ярков]

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>

Answer 4

[Loli E1ON]

Answer 5

[Владимир Коротенко]

Правильно ругаются. Сделайте контрол, который меняет состояние переменной isOn дальше в стиле используйте условный оператор это есть в документации.