How to change styles on a specific child element in vue?

Question

Vue.js

Here is the code .
Now, when you click on any element, the styles of all elements change, but you need the color to change only for the child element whose parent we clicked.

Answer 1

If several elements can change their color at the same time:

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="n ? 'green' : 'red'">{{ i + 1 }}</div>
  </div>
</div>

If only one:

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>