Question

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

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

我希望能够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')

Answer 1

您应该在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.

具有对象数组的多选和v模型

1 个答案: