VueJS多重選擇

Question

我試着多與選擇2 我用laravel選擇和我上的UserRole數據返回的用戶模型數據與關聯角色和allRoles只是所有角色模型上查看 代碼

<select class="form-control" name="roles[]" id="roles" multiple> 
      <option v-for="role in allRoles" 
        :value="role.id" 
        > 
       @{{ role.name }} 
      </option> 
</select> 

如何使用userRoles數組設置選定的選項？

Answer 1

添加computed的HashMap（對象）來搜索選定的角色：

computed: { 
    selectedRoleMap() { 
     var map = {}; 
     this.userRoles.forEach(role => { 
      map[role] = 1; 
     }); 
     return map; 
    } 
} 

然後加入:selected="selectedRoleMap.hasOwnProperty(role.id)"到option秒。這裏

工作小提琴：https://jsfiddle.net/df7j8xhz/

或者，您也可以通過userRoles添加hasRolemethod循環，看是否id是userRoles，但建立一個HashMap和搜索它具有比循環數組有更好的表現allRoles.length次。