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

Posted 2023-02-22

【中文标题】How do I preselect a vue-multiselect option when options is an array of objects?

【英文标题】：

【发布时间】：2019-07-14 15:11:53

【问题描述】：

我想在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'，等等。是name，但似乎没有任何效果。

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

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

【参考方案1】：

track-by 用法

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

也就是说，它指定了比较options中的对象值时要使用的对象键。如果选项为对象，则应陈述track-by 987654327 @ 987654327所需的状态因为track-by 987654329 to determine which options in the dropdown are selected和to properly remove a selected option from a multiselect。

如果没有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>

【讨论】：

感谢您解释所有这些。我明白了，我将不得不实施类似的东西，但老实说，这感觉就像一个穷人的解决方案。当您指定 track-id 时，vue-multiselect 应该会自动为您处理此问题。

【参考方案2】：

看起来像一个错误。解决方法是使用对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
    ;
  
);

【讨论】：

感谢您的回复，史蒂文。我尝试在返回的data 对象中为test 设置以下所有内容，但它们都不起作用：1、'1'、[1]、['1']、 id: 1 、 id: '1' .还有其他想法吗？谢谢。

似乎没有什么不同。我在组件中设置了:options="testOptions"，然后在data 对象中设置了以下属性：[id: 1, name: 'Test 1', id: 2, name: 'Test 2', id: 3, name: 'Test 3']。尝试再次将test 设置为所有各种可能性，但没有任何效果。还有其他想法吗？

给你：codepen.io/HartleySan/pen/NomLqN?editors=1111。被注释的代码不起作用，但如果你用注释掉的 html 和 JS 将其切换出来，那么它会预先选择 Test 1 值。没有线索。

史蒂文，你是对的，这确实有效。虽然不是一个很好的解决方法，但有两个原因：1）我不会轻易将选定的对象放在手边。通常我会有我想从中选择对象的 ID； 2）如果你这样做，你甚至不需要track-by 属性，在这种情况下，该属性是做什么用的？是马车吗？也许我误解了一些东西，但图书馆似乎有问题。如果您设置track-by="id"，那么我认为您应该能够设置test: 1 并且一切顺利。我想知道我是否应该就此提交错误报告。

它肯定是一个错误。在处理完这类事情后，我开始使用vuetify...

【参考方案3】：

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