Vue Multiselect绑定v-model并生成带默认配置的对象列表

方案1：直接绑定带默认配置的选项对象（推荐） #

这种方法让Multiselect直接绑定对象数组，原生支持选中、删除操作，还能保留后续对对象配置的修改。

1. 先把原始信号名称转换成带默认配置的选项数组：

// 原始信号名称列表（可来自接口或静态数据）
const rawSignalNames = ['signal1', 'signal2', 'signal3']

// 生成带默认配置的选项数组
const signalOptions = ref(rawSignalNames.map(name => ({
  name, // 用于Multiselect显示的名称
  interpolation: true,
  unit: '',
  type: 'origin'
})))

// 绑定选中的对象数组
const selectedSignals = ref([])

2. 在模板中配置Multiselect：

<Multiselect
  v-model="selectedSignals"
  :options="signalOptions"
  optionLabel="name" // 指定显示选项的字段为name
  multiple
  placeholder="选择信号"
  trackBy="name" // 可选：用name作为唯一标识，避免重复选中
/>

操作后，selectedSignals就是你需要的对象数组，Multiselect的删除、多选功能完全正常，后续还能直接修改selectedSignals里对象的配置（比如修改unit）。

方案2：用计算属性转换字符串数组为对象数组 #

如果只想保持Multiselect绑定字符串数组，同时通过计算属性自动生成对象数组（适合不需要修改对象配置的场景）：

<template>
  <Multiselect
    v-model="selectedSignalNames"
    :options="rawSignalNames"
    multiple
    placeholder="选择信号"
  />
</template>

<script setup>
import { ref, computed } from 'vue'

const rawSignalNames = ref(['signal1', 'signal2', 'signal3'])
const selectedSignalNames = ref([])

// 计算属性自动生成对象数组
const selectedSignalObjects = computed(() => {
  return selectedSignalNames.value.map(name => ({
    name,
    interpolation: true,
    unit: '',
    type: 'origin'
  }))
})
</script>

此时selectedSignalObjects是实时更新的对象数组，但它是只读的，无法直接修改里面的配置项。

为什么之前@change的方法不行？ #

因为@change触发时，Multiselect的v-model已经更新为字符串数组，此时手动生成对象数组会和v-model绑定值脱节——Multiselect只认绑定的字符串数组，删除操作只会修改字符串数组，不会同步到你手动生成的对象数组，导致状态不一致。上面的方案都是让v-model和最终需要的对象数组直接关联（或通过计算属性实时同步），避免了状态脱节问题。

内容的提问来源于stack exchange，提问作者dymek662