다중 선택 및 v-모델(개체 어레이 포함)

다중 선택 및 v-모델(개체 어레이 포함)

나는 Vue.js 2.0과 요소 UI 라이브러리를 사용하고 있다.

다중 선택 컴포넌트로 작업 중이야.v-model 속성은 모든 옵션을 미리 선택하기 위해 여기에 있다.그래서 만약 있다면model: ['Option4'], 옵션4를 사용하여 선택 항목 미리 선택됨

할 수 있었으면 좋겠다.v-model각 옵션의 레이블을 포함하는 배열 대신 객체 배열

즉, 사용하는 대신model: ['Option4']나는 이런 것을 사용할 수 있기를 바란다.model: [{name:'Option4'}, {name:'Option5'}].

그렇게 할 때 사전 선택이 제대로 이루어지지 않는다.

그렇게 하는 것이 가능한가? 만약 그렇다면 어떻게?

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

넌 통과해야 한다.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]
    }
  }
}

여기 해결책이 있다.

참조URL: https://stackoverflow.com/questions/43239604/multiple-select-and-v-model-with-array-of-object