如何将 v-model 用于窗体和填充下拉列表

Question

我想使用 v-select

执行两项任务，该 v-select 具有要加载的动态项目。

1.想要将项目文本与要插入的表单绑定。

2.想要在选择选项时获取项目ID。

我的代码 ：

<v-select
        :items="titles"
        item-text="ocmtitle"
        item-value="id"
        v-model="ocmform.title"
        label="Ocm Title"
        @change="getOcmsubtitles()"
        outline
        ></v-select>

Answer 1

你应该使用 multi-select 来v-model元素。下面是一个示例。

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data: {
    value: '',
    options: [{
        name: 'Vue.js',
        language: 'JavaScript'
      },
      {
        name: 'Rails',
        language: 'Ruby'
      },
      {
        name: 'Sinatra',
        language: 'Ruby'
      },
      {
        name: 'Laravel',
        language: 'PHP',
        $isDisabled: true
      }
    ]
  },
  methods: {}
}).$mount('#app')

* {
  font-family: 'Lato', 'Avenir', sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
<div id="app">
  <multiselect v-model="value" :options="options" placeholder="Pick some" label="name" track-by="name" id="example">
  </multiselect>
  <pre class="language-json"><code>{{ value  }}</code></pre>
</div>