Vue 3自定义SelectInput组件重置失效及同步问题求助

你的问题根源在于自定义SelectInput组件没有正确实现v-model的双向绑定逻辑，导致修改form.search_ciudad为null时，组件内部的select元素未同步更新选中状态。以下是具体修复步骤：

1. 修正自定义SelectInput组件的v-model实现 #

确保组件正确接收modelValue属性，并在外部值变化时同步内部select的状态，同时触发更新事件。示例实现如下：

<template>
  <div>
    <label :for="id">{{ label }}</label>
    <select 
      :id="id"
      :class="class"
      :value="modelValue" <!-- 绑定外部传入的modelValue -->
      @change="$emit('update:modelValue', $event.target.value)" <!-- 触发更新事件 -->
      ref="selecting"
    >
      <slot></slot>
    </select>
  </div>
</template>

<script setup>
// 定义组件接收的props
defineProps({
  id: String,
  label: String,
  class: String,
  modelValue: [Number, String, null] // 允许null值
})
// 定义触发的事件
defineEmits(['update:modelValue'])
</script>

2. 移除模板中的错误selected绑定 #

原代码中第一个option的:selected="form.search = null"是错误的赋值操作，且v-model会自动处理选中状态，直接删除该绑定：

<select-input id="ciudades" label="Ciudad" class="text-sm pb-1 lg:pr-3 w-full lg:w-1/2"
              ref="selectInputComponentCiudad" v-model="form.search_ciudad">
    <!-- 修正：只保留value绑定，移除错误的selected逻辑 -->
    <option :value="null"></option>
    <option v-for="ciudad in ciudades" :key="ciudad.id" :value="ciudad.id" class="capitalize">
        {{ ciudad.nombre_ciudad }}
    </option>
</select-input>

3. 简化重置方法 #

现在无需使用setTimeout或手动修改selectedIndex，直接设置变量即可实现双向同步：

const limpiarCampos = () => {
    form.search_ciudad = null
}

问题根源说明 #

• 自定义组件若未监听modelValue的变化并同步到内部select，外部修改v-model绑定的变量时，组件UI不会自动更新
• 手动修改selectedIndex是绕过v-model的临时方案，会导致数据与UI不同步，setTimeout只是延迟执行掩盖了同步问题，并非根本解决办法

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