arrays - How do I preselect a vue-multiselect option when options is an array of objects?

Question

我想在 vue-multiselect 生成的选择下拉列表中预先选择一个特定值。
如果我有一个像下面这样的简单字符串数组，我可以让它正常工作:

['Test 1', 'Test 2', 'Test 3']

但是，当我使用一个对象数组时，我无法让它工作。例如，如果我有以下内容:

<v-multiselect :options="[{id: 1, name: 'Test 1'}, {id: 2, name: 'Test 2'}, {id: 3, name: 'Test 3'}]"
               label="name"
               track-by="id"
               v-model="test">
</v-multiselect>

无论我如何设置 v-model 连接到的 test 数据属性，它都不会预选该值。我试过 1、2、3、'1'、'2' 和 '3' 用于 test 当 track-by 是 id 和 'Test 1' 等，当 track-by 是 name 但似乎没有任何效果。

我在这里做错了什么？我在 https://vue-multiselect.js.org/#sub-single-select-object 查看了文档，但当您想为选项的对象数组预设值时，它们似乎没有提供示例。谷歌搜索也没有返回我要找的东西。

在相关主题上，一旦我开始工作，当我将组件设置为 multiple 时，我需要更改什么才能选择多个值？谢谢。

Answer 1

track-by用法

文档表明 track-by is “用于比较对象。仅在选项是对象时使用。”

也就是说，它指定在比较 options 中的对象值时要使用的对象键.文档实际上应该说明 track-by is required when the options are objects because <vue-multiselect>使用 track-by to determine which options in the dropdown are selected和 to properly remove a selected option from a multiselect .

没有track-by ，您会看到对象选项的两个错误行为:(1) 用户将能够重新选择已经选择的选项，以及 (2) 尝试删除所选选项反而会导致所有选项被重新插入。

设置初始值

<vue-multiselect>不支持自动转换值数组，但您可以从父组件轻松完成此操作。

1. 创建本地数据属性以指定 track-by和初始多选值(例如，分别命名为 trackBy 和 initialValues):

   export default {
     data() {
       return {
         //...
         trackBy: 'id',
         initialValues: [2, 5],
       }
     }
   }
   

2. 绑定(bind) <vue-multiselect>.track-by至 this.trackBy和 <vue-multiselect>.v-model至 this.value :

   <vue-multiselect :track-by="trackBy" v-model="value">
   

3. 创建 watcher在 this.initialValues将这些值映射到基于 this.trackBy 的对象数组中, 设置 this.value结果:

   export default {
     watch: {
       initialValues: {
         immediate: true,
         handler(values) {
           this.value = this.options.filter(x => values.includes(x[this.trackBy]));
         }
       }
     }
   }
   

Vue.component('v-multiselect', window.VueMultiselect.default);

new Vue({
  el: '#app',
  data () {
    return {
      trackBy: 'id',
      initialValues: [5,2],
      value: null,
      options: [
        { id: 1, name: 'Vue.js', language: 'JavaScript' },
        { id: 2, name: 'Rails', language: 'Ruby' },
        { id: 3, name: 'Sinatra', language: 'Ruby' },
        { id: 4, name: 'Laravel', language: 'PHP' },
        { id: 5, name: 'Phoenix', language: 'Elixir' }
      ]
    }
  },
  watch: {
    initialValues: {
      immediate: true,
      handler(values) {
        this.value = this.options.filter(x => values.includes(x[this.trackBy]));
      }
    }
  }
})

<script src="https://unpkg.com/vue@2.6.6/dist/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">
  <v-multiselect :track-by="trackBy"
                 :options="options"
                 v-model="value"
                 label="name"
                 multiple>
  </v-multiselect>
  <pre>{{ value }}</pre>
</div>