单击时从Vue数组元素访问数据

Question

我的Vue数据包含人员列表。

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-for在列表中显示这些人的名字：

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

当前，为了提醒阵列中用户的实际电子邮件，我必须对要提醒的索引进行硬编码。 我的问题是，如何动态访问已单击的数组元素的数据？

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);
}