Multiple choice and v-model with object array

I am using Vue.js 2.0 and the Element library.

I am working with several components . The v-model property is intended to pre-select any parameters. So if you have model: ['Option4']

, the selection will be preselected with option4

I would like to be able to v-model

array an object instead of a simple array containing the label of each option.

That is, instead of using, model: ['Option4']

I would like to use something like model: [{name:'Option4'}, {name:'Option5'}]

.

However, the preselection is not performed as expected.

Can this be done? 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')

      

+3


source to share


1 answer


You must pass the value

object to an array 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]
    }
  }
}

      



Here is a working solution.

+1


source







All Articles