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

私が使用した解決策は、配列要素のレンダリング中にインデックスを取得し、そのインデックスを関数に渡すことでした。

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

そして：

私は、あなたが簡単にテンプレートにtest機能に電子メールを渡すことができ

<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

メールを配列の要素を検索し、警告することができ：

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