具有對象數組的多選和v模型

Question

我正在使用Vue.js 2.0和Element UI庫。

我正在使用多選組件 。 v-model屬性用於預先選擇任何選項。 因此，如果您有model: ['Option4'] ，將使用Option4預選選擇

我希望能夠對一個對象數組進行v-model ，而不僅僅是一個包含每個選項標簽的數組。

也就是說，而不是使用model: ['Option4']我希望能夠使用類似model: [{name:'Option4'}, {name:'Option5'}]東西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數組中傳遞object的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]
    }
  }
}

這是工作解決方案。