Multiple select and v-model with array of object

Question

I'm using Vue.js 2.0 and the Element UI library.

I'm working with a multiple select component. The v-model property is here to pre-select any options. So if you have model: ['Option4'], the select will be preselected with Option4

I would like to be able to v-model an array of object instead of simply an array containing the label of each option.

That is to say instead of usingmodel: ['Option4'] I would like to be able to use something like model: [{name:'Option4'}, {name:'Option5'}].

When doing so the pre-selection is not made properly.

Is it possible to do that ? If so how ?

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

Hello Alexandru, I followed your advice and now I'm putting it into context. The preselection is ok but I can't select another option. Any idea ? — Léo Coco
– Léo Coco, Commented Apr 5, 2017 at 20:20
I don't understant why you can't select another option.In edited fiddle it is working perfectly.Have a look. — Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut, Commented Apr 5, 2017 at 20:30
I'm going to create a new task for that. I'm sorry. Yes this one is working perfectly but the issue I posted here does not illustrate the whole story. Maybe you will be able to help me on the next one I'm going to create. — Léo Coco
– Léo Coco, Commented Apr 5, 2017 at 20:33

Mihai Alexandru-Ionut · Accepted Answer · 2017-04-05 19:15:35Z

1

You should pass the value of object in options array.

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]
    }
  }
}

Here is working solution.

edited Apr 5, 2017 at 19:15

answered Apr 5, 2017 at 19:10

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple select and v-model with array of object

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related