從vue數組元素點擊時訪問數據

Question

我的vue數據由一系列人組成。

<ul v-for="user in users"> 
    <li class="btn btn-primary" v-on:click="test">${user.first_name} ${user.last_name}</li> 
</ul> 

目前，爲了提醒陣列中的用戶的實際的電子郵件，我有硬編碼：

self.vue = new Vue({ 
    el: "#vue-div", 
    delimiters: ['${', '}'], 
    unsafeDelimiters: ['!{', '}'], 
    data: { 
     users: [ 
      {first_name: "John", 
      last_name: "Doe", 
      email: "jdoe@gmail.com" 
      }, 
      {first_name: "Jane", 
      last_name: "Smith", 
      email: "jsmith@gmail.com" 
      }, 
     ] 
    }, 
    methods: { 
     test: function(e) { 
      alert(this.users[0].email); 

     } 
    } 

}); 

我然後在列表中使用V-用於顯示這些人的名字要提醒的索引。我的問題是，我如何動態訪問已被點擊的數組元素的數據？

Answer 1

我使用的解決方案是在呈現數組元素時獲取索引，然後將該索引傳遞給函數。

我可以再看看元素的數組中，並警告電子郵件

<ul v-for="(user, index) in users"> 
    <li v-on:click="test(index)">${user.first_name} ${user.last_name}</li> 
</ul> 

self.test = function(index) { 
    alert(self.vue.users[index].email); 
} 

Answer 2

你可以簡單地通過電子郵件發送到test函數模板：

v-on:click="test(user.email)"

然後：

function test(email) { 
    alert(email); 
}