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

基本上，我正在尝试创建一个最喜欢的按钮，您可以在其中切换从数组宠物中收藏对象。我知道为什么我的方法会激活我的所有按钮。由于被收藏并非按钮所独有且来自数据。因此，当favorited = true时，类“red”将绑定到我的所有按钮。我的问题是如何将类“红色”绑定到我点击的按钮？我对Vue比较陌生，这让我疯狂大声笑！有人请告诉我如何解决这个问题。

Answer 1

在宠物数组中为宠物对象添加一个favited属性。然后使用该属性。

<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

如果您不想修改宠物物品，请here is an alternate way。

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

1 个答案: