vue 改动computed来间接改动data的数据

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_15206589/article/details/79699781

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数据。

如果直接使用只会修改一个数据。触发一次方法，修改一个数据。