用vuejs显示复选框选中的行

Question

我开始使用 vuejs 和一个 vue 网格 https://jsfiddle.net/kc11/7fqgavvq/2/。

我想在以下位置显示选中的行对象：

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

在table的底部。我遇到过 with an associated fiddle at https://jsfiddle.net/okv0rgrk/206/ 如果您查看输出的选定 ID，它会显示我的意思。

为了让它正常工作，我需要向 table 组件添加一个类似于

的方法

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

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

谁能解释一下这个函数，因为我对 'this' 在这种情况下的含义特别困惑。

Answer 1

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

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

编辑 -- 计算属性

将此添加到您的组件中：

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

然后，在此组件的任何位置，this.userCount 将 return 用户数。只要用户数量发生变化，此变量就会更新。这就是为什么它是 "computed" 属性 - 您不必更新，它会在需要时自动重新计算。

用vuejs显示复选框选中的行

Displaying checkbox selected rows with vuejs

javascript

vue.js