Vue自定义select组件使用v-model时值不更新问题咨询

v-model失效是以下几个核心问题共同导致的：

• 未声明value属性：你在model配置中指定v-model绑定的属性为value，但props配置里没有定义该属性，父组件通过v-model传入的值无法被组件接收。
• 未关联原生select的值：没有把接收的value属性绑定到原生<select>元素上，下拉框的选中状态无法和外部v-model的值同步。
• 未抛出自定义change事件：v-model监听的是组件主动触发的change自定义事件，你没有监听原生select的change事件向外抛值，父组件收不到更新通知，自然无法更新v-model绑定的变量。
• 多余的selected属性：原生select绑定value后会自动匹配对应option，手动写selected属性反而会和绑定逻辑冲突，导致状态异常。

<template>
  <select
    :value="value"
    @change="$emit('change', $event.target.value)"
    class="
      py-1.5
      px-2
      outline-none
      border-primary-lightblue border-2
      rounded-xl
      transition
      duration-500
      focus:border-primary-blue
    "
  >
    <option
      v-for="option in optionsWithDefaultState"
      :key="option.value || option"
      :value="option.value || option"
      :disabled="option === ' '"
      :hidden="option === ' '"
    >
      {{ option.label || option }}
    </option>
  </select>
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: [String, Number, Object],
      default: " "
    },
    options: {
      type: Array,
      default: () => [],
    }
  },
  computed: {
    optionsWithDefaultState() {
      return [" ", ...this.options];
    },
  },
};
</script>

如果你的options数组中的value是对象类型，原生select无法直接匹配对象值，建议要么将value转为唯一字符串标识（比如对象的id），要么替换原生select为自定义div实现的下拉组件，避免类型转换问题。

修改完成后你原来的v-model调用写法就可以正常生效了。

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