javascript - 带有对象数组的多重选择和 v-model

Question

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

我正在使用一个多选组件。v-model 属性用于预选任何选项。因此，如果您有 model: ['Option4']，将使用 Option4 预选 select

我希望能够 v-model 对象数组，而不是简单地包含每个选项标签的数组。

也就是说，我希望能够使用 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]
    }
  }
}

这里是 working solution.