多重選擇和v模型與對象數組

我正在使用Vue.js 2.0和Element UI庫。多重選擇和v模型與對象數組

我正在與一個多選組件。 v模型屬性在這裏預先選擇任何選項。所以，如果你有model: ['Option4']，選擇將與選項4

預選，我想能夠v-model對象的數組，而不是簡單地包含每個選項的標籤的數組。

這就是說，而不是使用model: ['Option4']我希望能夠使用像model: [{name:'Option4'}, {name:'Option5'}]之類的東西。

當這樣做預選不正確。

有沒有可能這樣做？如果是這樣如何？

<div id="app"> 
<template> 
    <el-select v-model="model" multiple placeholder="Select"> 
    <el-option v-for="item in options" :label="item.label" :value="item.value"> 
    </el-option> 
    </el-select> 
</template> 
</div> 

var Main = { 
    data() { 
     return { 
     options: [{ 
      value: 1, 
      label: 'Option1' 
     }, { 
      value: 2, 
      label: 'Option2' 
     }, { 
      value: 3, 
      label: 'Option3' 
     }, { 
      value: 4, 
      label: 'Option4' 
     }, { 
      value: 5, 
      label: 'Option5' 
     }], 
     model: ['Option4'] 
     } 
    } 
    } 
var Ctor = Vue.extend(Main) 
new Ctor().$mount('#app')

來源

2017-04-05 Léo Coco

爲什麼你從我的回答刪除'接受answer'？ –

亞歷山德魯你好，我遵循你的建議，現在我把它放到上下文中。預選是好的，但我不能選擇其他選項。任何想法？ –

我不明白爲什麼你不能選擇另一個選項。在編輯小提琴它是完美的工作。看看。 –

你應該傳遞對象的value在options陣列。

var Main = { 
    data() { 
    return { 
     options: [{ 
     value: 1, 
     label: 'Option1' 
     }, { 
     value: 2, 
     label: 'Option2' 
     }, { 
     value: 3, 
     label: 'Option3' 
     }, { 
     value: 4, 
     label: 'Option4' 
     }, { 
     value: 5, 
     label: 'Option5' 
     }], 
     model: [4] 
    } 
    } 
}

這裏是working solution.

來源

2017-04-05 19:10:07

多重選擇和v模型與對象數組

回答

相關問題