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

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

2 个答案: