オブジェクトの配列を持つ複数の選択とvモデル

Question

私はVue.js 2.0とElement UIライブラリを使用しています。

私は複数選択コンポーネントを使用しています。 v-modelプロパティは、オプションを事前に選択するためのものです。あなたはmodel: ['Option4']を持っている場合、選択はオプション4

で事前に選択されるように は私がv-modelにオブジェクトの配列の代わりに、単純に各オプションのラベルを含む配列できるようにしたいと思います。

つまり、model: ['Option4']の代わりにmodel: [{name:'Option4'}, {name:'Option5'}]のようなものを使用したいと考えています。

このようにすると、事前選択が正しく行われません。

これは可能ですか？もしそうなら、どのように？

http://jsfiddle.net/3ra1jscx/

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

Answer 1

あなたはoptions配列内のオブジェクトのvalueを渡す必要があります。ここで

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] 
    } 
    } 
} 

は、なぜあなたは私の答えから `受け入れanswer`を削除するにはworking solution.