Nuxt3中VueMultiselect在HeadlessUI Dialog默认展开的修复方法

问题现象 #

在Nuxt3项目中，将VueMultiselect组件嵌入HeadlessUI的Transition Dialog模态框后，打开模态框时会出现多选框默认展开的情况：当模态框内有两个多选框时，第一个会自动展开；仅一个多选框时，该组件直接默认展开。

修复方案 #

1. 手动控制VueMultiselect的展开状态 #

VueMultiselect默认会在组件挂载、焦点触发等场景下自动展开，我们可以通过open属性手动强制控制其关闭状态。

修改components/MultiSelect.vue：

<template>
  <label class="w-1/6 font-semibold text-base mb-1">{{ label }}</label>
  <div class="flex items-center dark:text-white">
    <VueMultiselect
      v-model="localModel"
      :label="label"
      :placeholder="label"
      :options="options.map((i) => i.value)"
      :custom-label="(opt) => options.find((x) => x.value == opt).text"
      :searchable="true"
      :close-on-select="false"
      :allow-empty="false"
      :multiple="true"
      :preselect-first="false"
      :open-direction="'above'"
      :prevent-autofocus="true"
      <!-- 新增：手动绑定展开状态，默认关闭 -->
      :open="isOpen"
      @open="isOpen = true"
      @close="isOpen = false"
    >
    </VueMultiselect>
  </div>
</template>

<script setup>
import VueMultiselect from "vue-multiselect";
import { ref, watch } from "vue";

const props = defineProps({
  label: {
    type: String,
    required: false,
  },
  modelValue: {
    type: Array,
    required: false,
    default: () => [],
  },
  options: {
    type: Array,
    required: true,
  },
  // 新增：允许外部传入初始展开状态，默认关闭
  open: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:modelValue"]);

// 修复v-model绑定：用本地ref维护状态，避免直接修改props
const localModel = ref([...props.modelValue]);
const isOpen = ref(props.open);

// 监听父组件传入的modelValue，同步到本地状态
watch(() => props.modelValue, (newVal) => {
  localModel.value = [...newVal];
}, { deep: true });

// 监听本地状态变化，向父组件emit更新
watch(localModel, (newVal) => {
  emits("update:modelValue", newVal);
}, { deep: true });
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>

2. 在模态框中强制多选框初始关闭 #

修改components/MyDialog.vue，给每个MultiSelect组件传入:open="false"，确保模态框打开时多选框处于关闭状态：

<!-- ... 其他代码 ... -->
<div class="flex items-center mt-10">
  <div class="w-2/5">
    <MultiSelect
      :label="'Option1'"
      v-model="selectedOption1"
      :options="options1"
      :open="false"
    />
  </div>

  <div class="w-2/5 ml-5">
    <MultiSelect
      :label="'Option 2'"
      v-model="selectionOption2"
      :options="options2"
      :open="false"
    />
  </div>
</div>
<!-- ... 其他代码 ... -->

3. 可选：模态框打开时延迟重置状态 #

如果上述方法仍有偶发问题，可以在模态框打开后延迟重置多选框状态，确保模态框渲染完成后生效：

const openModal = () => {
  showModal.value = true;
  // 延迟100ms执行，确保DOM渲染完成
  setTimeout(() => {
    // 若需要，可通过ref获取MultiSelect组件强制关闭
    // 示例：给MultiSelect加ref="select1"，然后执行 select1.isOpen = false
  }, 100);
};

额外优化：修复原组件的v-model绑定问题 #

原MultiSelect组件中直接使用ref(props.modelValue)会导致响应式异常，因为props是只读属性，且数组类型会直接引用原数据。改用本地ref+双向watch的方式，既能避免修改props的风险，也能保证双向绑定正常工作。

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