data数据:
groups: { value: {name: 'Group-1'}, options: [ {name: 'Group-1'}, {name: 'Group-2'}, {name: 'Group-3'}, {name: 'Group-4'}, {name: 'Group-5'} ] }, users: [ {value: 'user-1', name: 'user-1', group: 'Group-1'}, {value: 'user-2', name: 'user-2', group: 'Group-2'}, {value: 'user-11', name: 'user-11', group: 'Group-1'}, {value: 'user-21', name: 'user-21', group: 'Group-2'}, {value: 'user-22', name: 'user-22', group: 'Group-2'}, {value: 'user-31', name: 'user-31', group: ''}, {value: 'user-32', name: 'user-32', group: ''} ]
computed计算属性:
computed: { selectedGroupUsers() { let resluts = []; for (let i = 0; i < this.users.length; i++) { if (this.users[i].group === this.groups.value.name) { resluts.unshift(this.users[i]); } } return resluts; }, noGroupUsers() { let resluts = []; for (let i = 0; i < this.users.length; i++) { if (this.users[i].group === '') { resluts.unshift(this.users[i]); } } return resluts; } },
方法:
moveAllToRight() { let noGroup = this.selectedGroupUsers; for (let i = 0; i < noGroup.length; i++) { noGroup[i].group = ''; } }, moveAllToLeft() { let selectedGroup = this.noGroupUsers; for (let i = 0; i < selectedGroup.length; i++) { selectedGroup[i].group = this.groups.value.name; } }
通过赋值给一个变量就可以通过computed来改动data里的数据,方便修改通过computed筛选出来的data数据。
如果直接使用只会修改一个数据。触发一次方法,修改一个数据。