多选Vue.js和计算属性

我正在使用Vue.js 2.0和Element UI库。多选Vue.js和计算属性

我想使用多重选择将一些角色归功于我的用户。

收到所有可用角色的列表并将其分配给availableRoles。由于它是一个对象数组，并且v-model只接受一个包含值的数组，我需要通过计算属性computedRoles提取角色的id。

我的用户的当前角色被接收并分配到userRoles: [{'id':1, 'name':'Admin'}, {'id':3, 'name':'User'}]。然后

computedRoles是等于[1,3]

选择的预选是好的，但我不能改变什么（添加或删除选择选项）

什么是错的，如何解决呢？

<div id="app"> 
    <template> 
     <el-select v-model="computedRoles" multiple placeholder="Select"> 
     <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'}] 
     } 
    }, 

    computed : { 

     computedRoles() { 
      return this.userRoles.map(role => role.id) 
     } 
    } 
    }

来源

2017-04-05 Léo Coco

我同意大多与@wostex的答案，但他不给你userRoles财产回来。基本上你应该换computedRoles和userRoles。 userRoles成为计算属性，computedRoles是数据属性。在我的更新中，我将computedRoles的名称更改为selectedRoles。

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')

这里是fiddle。

来源

2017-04-05 21:28:54 Bert

检查解决方案：jsfiddle

这里需要说明的是，计算性能主要干将。你可以为计算出的属性定义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')

来源

2017-04-05 21:08:40 wostex

多选Vue.js和计算属性

回答

相关问题