使用vuejs显示复选框选中的行

Displaying checkbox selected rows with vuejs

本文关键字：复选框 vuejs 显示 使用      更新时间：2023-09-26

我从vuejs和vue网格开始https://jsfiddle.net/kc11/7fqgavvq/2/.

我想在中显示选中的行对象

    <pre> {{ selected| json}} </pre>

在桌子的底部。我在网站上看到了用关联的小提琴勾选所有复选框vuejshttps://jsfiddle.net/okv0rgrk/206/如果你看一下输出的Selected Id，就会明白我的意思。

为了实现这一点，我需要向表组件添加一个类似于的方法

methods: {
    selectAll: function() {
        this.selected = [];
        for (user in this.users) {
            this.selected.push(this.users[user].id);
        }
    }

在https://jsfiddle.net/okv0rgrk/206/

有人能解释一下这个函数吗？因为我特别不明白"这"在这个上下文中的意思。

this是指您的组件。因此，可以使用this调用组件内部的任何内容。您可以使用this.users或this.selected访问数据，使用this.selectAll()运行方法或访问组件中的任何其他内容。

在那个fiddle中，数据上有一个users属性，所以this.users指的是那个数组。函数selectAll()清空this.selected数组，然后遍历并将每个用户重新添加到数组this.selected中。

编辑-计算属性

将此添加到您的组件：

computed:{
    userCount: function(){
        return this.users.length;
    }
}

那么，在该组件的任何位置，this.userCount都将返回用户数。此变量将在用户数量发生变化时随时更新。这就是为什么它是一个"计算的"属性-你不必更新，它只需要在需要时自动重新计算。

相关文章：