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

Question

[Sector567]

Вот код.
Сейчас при клике на какой либо элемент, меняется стили у всех элементов, а нужно чтобы цвет менялся только у того дочернего элемента, на родителя которого мы кликнули.

Answer 1

[0xD34F]

• Если только один элемент может изменить свой цвет, то добавляем в компонент свойство, которое будет содержать индекс такого элемента или его id или ещё что-то уникальное. В зависимости от его равенства этой уникальной характеристике элемента назначаем класс:
  
  

  data: () => ({
    active: null,
  }),

  
  

  <div class="item" v-for="i in 5">
    <div class="parent" @click="active = active === i ? null : i">
      <div class="child" :class="active === i ? 'green' : 'red'">{{ i }}</div>
    </div>
  </div>

  
  
• Если одновременно несколько элементов могут менять свой цвет, то надо хранить состояния каждого:
  
  

  data: () => ({
    items: Array(5).fill(false),
  }),

  
  

  <div class="item" v-for="(n, i) in items">
    <div class="parent" @click="$set(items, i, !n)">
      <div class="child" :class="{ green: n, red: !n }">{{ i + 1 }}</div>
    </div>
  </div>

  
  Или, можно сделать отдельный компонент для отображения одного элемента, который будет содержать в себе его состояние:
  
  

  props: [ 'text' ],
  data: () => ({
    active: 0,
  }),

  
  

  <div class="item">
    <div class="parent" @click="active ^= 1">
      <div class="child" :class="[ 'red', 'green' ][active]">{{ text }}</div>
    </div>
  </div>

  
  И создавать сколько надо экземпляров:
  
  

  data: () => ({
    items: Array.from({ length: 5 }, (_, i) => `item #${-~i}`),
  }),

  
  <v-item v-for="n in items" :text="n"></v-item>
  
  

Comments

[Sector567]

Большое спасибо

[Sector567]

Возникли еще трудности на эту тему. Если будет время, посмотрите вопрос Как реализовать такую логику во vue без document.querySelector?

[0xD34F]

Sector567, это тот же самый вопрос, никаких принципиальных отличий нет.

И не надо зазывать отвечать на один вопрос в комментариях к ответу на другой. Никогда больше так не делайте.