具有对象数组的多选和 v-model答案

【问题标题】：Multiple select and v-model with array of object具有对象数组的多选和 v-model
【发布时间】：2017-08-31 13:33:08
【问题描述】：

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

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

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

也就是说，我希望能够使用model: [{name:'Option4'}, {name:'Option5'}]之类的东西，而不是使用model: ['Option4']。

如果这样做，则未正确进行预选。

有可能这样做吗？如果有怎么办？

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

【问题讨论】：

为什么要从我的回答中删除accepted answer？
您好 Alexandru，我听从了您的建议，现在我将其置于上下文中。预选没问题，但我无法选择其他选项。有什么想法吗？
我不明白为什么你不能选择另一个选项。在编辑过的小提琴中它工作得很好。看看。
我要为此创建一个新任务。对不起。是的，这个工作完美，但我在这里发布的问题并不能说明整个故事。也许你可以帮助我完成下一个我要创建的内容。
stackoverflow.com/questions/43241149/…

标签： javascript arrays select vue.js vuejs2

【解决方案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.

【讨论】：