在 v-for 中单击按钮更改此属性 vue js答案

【问题标题】：on click button within v-for change this attribute vue js在 v-for 中单击按钮更改此属性 vue js
【发布时间】：2018-02-09 08:30:45
【问题描述】：

我正在尝试创建一个像 facebook 这样的“添加朋友”按钮。当单击此“添加朋友”按钮时，它会变为“已发送朋友请求”按钮。我尝试了以下不起作用的方法：

html:

<div v-for="(friend, index) in friends">
    <div v-if="friend.sentRequest">
        <button class='disabled'>Friend request sent</button>
    </div>
    <div v-else>
        <button @click="addFriend(friend)">Add friend</button>
    </div>
</div>

脚本：

<script>
    export default {
        data() {
           return {
                friends: [],
           } 
        },

        methods: {
            addFriend(friend) {
                friend.sentRequest = true;
            }
        }
    }
</script>

我需要帮助来解决这个问题。提前致谢。

【问题讨论】：

测试这个：this.$set(friend, 'sentRequest', true) addFriend(friend) 方法。
你可以像 this.friend.sentRequest = true; 这样使用
是的，就像魅力一样.. !!但我在另一个地方应用了我的方法，几乎类似于这个正在工作的场景。为什么我的方法在这里失败？ @Damon.s
你的方法不起作用@Naveen
朋友对象是否事先具有sentRequest 属性？

标签： javascript laravel laravel-5 vue.js vuejs2

【解决方案1】：

当你想为现有对象定义属性时，你应该使用this.$set(target, key, value)。

在这种情况下使用：

methods: {
    addFriend(friend) {
        this.$set(friend, 'sentRequest', true);
    }
}

【讨论】：