Currently, I am creating a small list that includes car companies with an option for users to select their favorite one. Within this list, there is an array of objects containing the name and a property called starred. I have a method named setStarred which allows users to set the starred property of the selected item to true.
The issue I am facing is that I want users to be able to only select one item at a time. For example, if I select BMW, all other items should have their starred property toggled to false. Currently, I can toggle the starred property of all items simultaneously.
You can view a working example on CodePen.
Here is an example of the code:
new Vue({
el: '#app',
data() {
return {
cars: [{
name: 'Toyota',
starred: false
},
{
name: 'BMW',
starred: false
},
{
name: 'Ford',
starred: false
}
]
}
},
methods: {
setStarred(item) {
item.starred = !item.starred
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e080b1b0a1718073e4f504b504f4a">[email protected]</a>/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4828191809d928db4c5dac1dac5c0">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet" />
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout justify-center column>
<v-flex xs6 v-for="(car,index) in cars" :key="index">
<h2>{{car.name}}
<v-icon :color="car.starred ? 'primary': '' " @click="setStarred(car)">star_border
</v-icon>
</h2>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>Your assistance in resolving this issue will be highly appreciated. Thank you.