在单击值数组元素时从该元素访问数据

Access data from a vue array element when it is clicked

本文关键字：元素 访问 数据 单击 数组元素      更新时间：2023-09-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>

目前，为了提醒数组中用户的实际电子邮件，我必须硬编码一个索引来发出警报。我的问题是，如何动态访问已点击的数组元素的数据?

我使用的解决方案是在呈现数组元素时获取索引，然后将该索引传递给函数。

然后我可以查找数组中的元素并通知电子邮件

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

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

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

然后:

function test(email) {
    alert(email);
}
相关文章：