Начал изучать Vue
Дошел до определенного момента, когда цвет переключается, но у всех объектов сразу и задался вопросом, как переключить у каждого отдельно? Указывал active: true в каждый объект, но это не помогло
<template>
<main>
<ul>
<li v-bind:class="{'greenlight': active}" v-for="data in webdata" :key="data.key" @click="data.show = !data.show" v-on:click="active = !active">
<h3 v-show="data.show">{{data.name}}</h3>
</li>
</ul>
</main>
</template>
export default {
data () {
return {
active: true,
webdata: [
{name: 'JavaScript', show: false},
{name: 'Vue.js', show: false},
{name: 'CSS', show: false},
{name: 'HTML', show: false}
]
}
}
}
.greenlight {
background: lightgreen;
}