多选 Vue.js 和计算属性 [英] Multiple select Vue.js and computed property

问题描述

我使用的是 Vue.js 2.0 和 Element UI 库.

我想使用多选来将某些角色分配给我的用户.

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

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

computedRoles 那么等于 [1,3]

选择的预选很好，但我不能改变任何东西(从选择中添加或删除选项)

出了什么问题以及如何解决?

http://jsfiddle.net/3ra1jscx/3/

<模板><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></模板>
变量主 = {数据() {返回 {可用角色:[{编号:1，名称:'管理员'}, {编号:2，名称:'高级用户'}, {编号:3，名称:'用户'}],用户角色:[{'id':1, 'name':'Admin'}, {'id':3, 'name':'User'}]}},计算:{计算角色(){返回 this.userRoles.map(role => role.id)}}}

解决方案

我大多同意 @wostex 的回答，但他没有将 userRoles 属性还给您.本质上，您应该交换 computedRoles 和 userRoles.userRoles 成为计算属性，computedRoles 成为数据属性.在我的更新中，我将 computedRoles 的名称更改为 selectedRoles.

var Main = {数据() {返回 {可用角色:[{编号:1，名称:'管理员'}, {编号:2，名称:'高级用户'}, {编号:3，名称:'用户'}],选定角色:[1,2]}},计算:{用户角色(){返回 this.availableRoles.reduce((selected, role) => {如果(this.selectedRoles.includes(role.id))选择.推(角色)；返回选择；}, [])}}}var Ctor = Vue.extend(Main)newctor().$mount('#app')

这是小提琴.

I'm using Vue.js 2.0 and the Element UI library.

I want to use a multiple select to attribute some roles to my users.

The list of all roles available is received and assigned to availableRoles. Since it is an array of object and the v-model accepts only an array with value, I need to extract the id of the roles trough the computed property computedRoles.

The current roles of my user are received and assigned to userRoles: [{'id':1, 'name':'Admin'}, {'id':3, 'name':'User'}].

computedRoles is then equals to [1,3]

The preselection of the select is fine but I can't change anything (add or remove option from the select)

What is wrong and how to fix it?

http://jsfiddle.net/3ra1jscx/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)
        }
    }
  }

解决方案

I agree mostly with @wostex answer, but he doesn't give you the userRoles property back. Essentially you should swap computedRoles and userRoles. userRoles becomes a computed property and computedRoles is a data property. In my update, I changed the name of computedRoles to 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')

And here is the fiddle.

这篇关于多选 Vue.js 和计算属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！