While developing an app using Vue.js, I have run into an issue. I am familiar with how to solve this problem using jQuery, but I am struggling to find a solution within my Vue app. Let me explain quickly - I have a list of items and I want to assign a specific color to the clicked element only, and remove it if a different element is clicked. I am looking to use e.target
to achieve this goal. Any suggestions would be greatly appreciated!
new Vue({
el: '#app',
methods: {
giveColor(event) {
event.target.className += " green";
}
}
})
.green {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="app">
<li class="some" @click="giveColor" v-for="y in 10">
menu clicked {{y}}
</li>
</div>