多選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和計算屬性

回答

相關問題