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模型连接到的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

看起来像个错误。解决方法是使用对object

的实际引用

Vue.component('v-multiselect', window.VueMultiselect.default);
let testOptions=[{id: 1, name: 'Test 1'}, {id: 2, name: 'Test 2'}, {id: 3, name: 'Test 3'}]
new Vue({
  el: '#app',
  data: function () {
    return {
      test: testOptions[1], // <- use an object ref here!
      testOptions
    };
  }
});

Answer 2

`track-by`的使用情况

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

也就是说，它指定比较options中的对象值时要使用的对象密钥。文档实际上应该声明track-by是当选项为对象时必需的，因为<vue-multiselect>使用track-by to determine which options in the dropdown are selected和to properly remove a selected option from a multiselect。 / p>

在没有track-by的情况下，您会看到两个错误的对象选项行为：（1）用户将能够重新选择已经选择的选项；（2）尝试删除选择的选项将导致所有选项都需要重新插入。

设置初始值

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

创建本地数据属性以指定track-by和初始多选值（例如，分别命名为trackBy和initialValues）：

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

将<vue-multiselect>.track-by绑定到this.trackBy并将<vue-multiselect>.v-model绑定到this.value：
```
<vue-multiselect :track-by="trackBy" v-model="value">
```

在this.initialValues上创建一个watcher，将这些值映射到基于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>

Answer 3

我发现的最简单的方法是从 BE 发送整个对象，因此它会被预先选择。如果您从 BE 发送相同的对象将被预先选择。但我不知道您的选项是硬编码在 FE 上还是来自数据库或其他东西。我有同样的问题，但我的值来自我的数据库，所以很容易重现对象

选项是对象数组时，如何预选vue-multiselect选项？

3 个答案:

`track-by`的使用情况

设置初始值

选项是对象数组时，如何预选vue-multiselect选项？

3 个答案:

track-by的使用情况

设置初始值

`track-by`的使用情况