vを押してボタンをクリックするとこの属性が変更されますvue js

Question

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> 

私はこの問題を解決するために助けが必要。前もって感謝します。

Answer 1

既存のオブジェクトのプロパティを定義する場合は、this.$set(target, key, value)を使用する必要があります。 。 `この$セット（友人、 'sentRequest'、true）の` `addFriend（友人）`メソッドに：この

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