在 Vue.js v-for 循环中处理动态创建的按钮

Question

我有一个 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 标签只是改变了颜色

<style scoped>
.red {
    color: red;
}

本质上，我正在尝试创建一个收藏按钮，您可以在其中切换收藏宠物数组中的 object。我知道为什么我的方法会激活我所有的按钮。由于收藏不是按钮独有的并且来自数据。所以当 favorited = true 时，class 'red' 绑定到我所有的按钮。我的问题是如何将 class 'red' 绑定到我单击的按钮？我对 Vue 比较陌生，这让我发疯了，哈哈！有人请告诉我如何解决这个问题。

Answer 1

将收藏的属性添加到宠物数组中的宠物 object。然后使用属性.

<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>

Example.

如果不想修改宠物object，那么here is an alternate way。

在 Vue.js v-for 循环中处理动态创建的按钮

Event handling dynamic created buttons in Vue.js v-for loop

dynamic

button

vue.js

vue-component

vuejs2