Javascript 多个选择Vue.js和computed属性

我正在使用Vue.js 2.0和元素UI库

我想使用multiple select将一些角色赋予我的用户

所有可用角色的列表将被接收并分配给可用角色。因为它是一个对象数组，并且v-model只接受一个有值的数组，所以我需要通过computed属性computedRoles提取角色的id

我的用户的当前角色已接收并分配给userRoles:[{'id'：1，'name'：'Admin'}，{'id'：3，'name'：'user'}]

然后，computedRoles等于[1,3]

select的预选很好，但我不能从select中更改任何添加或删除选项

有什么问题，如何解决

检查解决方案：

这里需要注意的是，计算属性主要是getter。您可以为computed属性定义setter，但我认为我的方法更像vue

简言之，代替计算集上的v-model，为数据属性设置v-model

完整代码：

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>
  <el-select v-model="ids" multiple placeholder="Select" @change="logit()">
    <el-option v-for="item in availableRoles" :label="item.name" :value="item.id">
    </el-option>
  </el-select>
</template>
</div>

var Main = {
    data() {
      return {
        availableRoles: [{
          id: 1,
          name: 'Admin'
        }, {
          id: 2,
          name: 'Power User'
        }, {
          id: 3,
          name: 'User'
        }],
        userRoles: [{'id':1, 'name':'Admin'}, {'id':3, 'name':'User'}],
        ids: []
      }
    },
    mounted() {
        this.ids = this.userRoles.map(role => role.id);
    },
    methods: {
        logit: function() {
        console.log(this.ids);
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

---

我基本上同意@wostex answer，但是他没有把userRoles属性还给你。基本上，您应该交换computedRoles和userRoles。userRoles成为计算属性，computedRoles成为数据属性。在我的更新中，我将computedRoles的名称更改为selectedRoles

这是我的答案

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>
  <el-select v-model="ids" multiple placeholder="Select" @change="logit()">
    <el-option v-for="item in availableRoles" :label="item.name" :value="item.id">
    </el-option>
  </el-select>
</template>
</div>

var Main = {
    data() {
      return {
        availableRoles: [{
          id: 1,
          name: 'Admin'
        }, {
          id: 2,
          name: 'Power User'
        }, {
          id: 3,
          name: 'User'
        }],
        userRoles: [{'id':1, 'name':'Admin'}, {'id':3, 'name':'User'}],
        ids: []
      }
    },
    mounted() {
        this.ids = this.userRoles.map(role => role.id);
    },
    methods: {
        logit: function() {
        console.log(this.ids);
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

var Main = {
    data() {
      return {
        availableRoles: [{
          id: 1,
          name: 'Admin'
        }, {
          id: 2,
          name: 'Power User'
        }, {
          id: 3,
          name: 'User'
        }],
        selectedRoles:[1,2]
      }
    },
    computed : {
      userRoles(){
         return this.availableRoles.reduce((selected, role) => {
             if (this.selectedRoles.includes(role.id))
                    selected.push(role);
             return selected;
         }, [])
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')