单击时从 vue 数组元素访问数据答案

【问题标题】：Access data from a vue array element when it is clicked单击时从 vue 数组元素访问数据
【发布时间】：2016-11-11 21:55:26
【问题描述】：

我的 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>

目前，为了提醒数组中用户的实际电子邮件，我必须硬编码要提醒的索引。我的问题是，如何动态访问被点击的数组元素的数据？

【问题讨论】：

标签： javascript mvvm vue.js vue-component

【解决方案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);
}

【讨论】：

【解决方案2】：

您可以简单地将电子邮件传递给模板中的test 函数：

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

然后：

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

【讨论】：