Question

我正在尝试创建一个“添加朋友”＃39;像facebook一样的按钮。点击这个＆＃39;添加朋友＆＃39;按钮更改为“朋友请求已发送”＆＃39;按钮。我尝试过以下无法解决的方法：

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>

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

Answer 1

如果要为现有对象定义属性，则应使用this.$set(target, key, value)。

在这种情况下使用：

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

在v-click中的单击按钮，用于更改此属性vue js

1 个答案: