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

Posted 2023-02-22

【中文标题】具有对象数组的多选和 v-model

【英文标题】：Multiple select and v-model with array of object

【发布时间】：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，我听从了您的建议，现在我将其置于上下文中。预选没问题，但我无法选择其他选项。有什么想法吗？

我不明白为什么你不能选择另一个选项。在编辑过的小提琴中它工作得很好。看看。

我要为此创建一个新任务。对不起。是的，这个工作完美，但我在这里发布的问题并不能说明整个故事。也许你可以帮助我完成下一个我要创建的内容。

***.com/questions/43241149/…

【参考方案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.