我有一个 v-for 循环,每次迭代都会创建一个按钮。我正在尝试制作一个切换处理程序,单击按钮将切换按钮的颜色。但是由于按钮是动态创建的,因此它们的所有颜色都在变化....
<div class="pets" v-for="pet in pets" :key="pet.id">
<button class="favorite" v-on:click="toggle">
<i v-bind:class="[{ 'red' : favorited }, 'material-icons']">favorite</i>
</button>
</div>
宠物数组正在被 http 调用填充。我的脚本如下所示:
<script>
export default {
name: 'home',
data() {
return {
pets: [],
favorited: false
}
},
methods: {
toggle: function() {
this.favorited = !this.favorited;
}
},
}
样式标签只是更改颜色
<style scoped>
.red {
color: red;
}
从本质上讲,我正在尝试创建一个收藏夹按钮,您可以在其中切换从数组宠物中收藏的对象。我知道为什么我的方法会激活我所有的按钮。由于收藏夹不是按钮独有的,并且来自数据。因此,当收藏夹 = true 时,类"红色"绑定到我的所有按钮。我的问题是如何将类"红色"绑定到我单击的按钮?我对 Vue 相对较新,这让我发疯,哈哈!有人请告诉我如何解决这个问题。
将收藏夹属性添加到 pets 数组中的宠物对象。然后使用该属性。
<div class="pets" v-for="pet in pets" :key="pet.id">
<button class="favorite" v-on:click="pet.favorited = !pet.favorited">
<i v-bind:class="[{ 'red' : pet.favorited }, 'material-icons']">favorite</i>
</button>
</div>
例。
如果您不想修改宠物对象,那么这里有另一种方法。