2017-08-31 96 views
-1

我想創建一個'添加朋友'按鈕像Facebook一樣。當點擊這個「添加朋友」按鈕時,它會變成「發送好友請求」按鈕。我曾嘗試以下方法不工作:點擊按鈕內的v - 用於更改此屬性vue js

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> 

我需要幫助解決這個問題。提前致謝。

+0

測試此:'這$組(朋友, 'sentRequest',真)''上addFriend(朋友)'方法。 – talkhabi

+0

你可以使用像** this.friend.sentRequest = true; ** – Naveen

+0

是工作像魅力..!但我在另一個地方應用了我的方法,幾乎​​和這個正在工作的場景類似。爲何我的方法在這裏失敗? @ Damon.s – WahidSherief

回答

2

當您要爲現有對象定義屬性時,應該使用this.$set(target, key, value)

在這種情況下使用:

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