Vue实现select禁用时清空已选值 数字为空时禁用单位选择框

目标交互规则 #

• 数字输入框无值时，单位下拉选择框自动禁用，无法选择单位
• 已选中单位的前提下，如果清空数字输入框的内容，同步清空下拉框已选值，禁用状态下不保留选中项

现有代码缺陷 #

当前代码只完成了一半逻辑，存在两个明确问题：

1. 字段绑定不一致：数字输入框v-model绑定的是number，但禁用判断用的是form.model.number，会直接导致禁用逻辑不生效
2. 缺少值清空联动逻辑：清空数字后，之前选中的单位值不会自动重置，不符合交互要求

可直接运行的修复代码 #

这里用输入框change事件做联动，逻辑简单直观，兼容Vue2/Vue3、Element UI/Element Plus等常见组件库写法：

<template>
  <div>
    <!-- 统一绑定form下的字段，加change事件监听值变化 -->
    <input-number v-model="form.model.number" @change="onNumberInput" />
    <select 
      v-model="form.model.unit" 
      :disabled="!form.model.number"
    >
      <!-- 补全option的key和value绑定，避免选中值异常 -->
      <select-option 
        v-for="item in currency_unit" 
        :key="item.value" 
        :value="item.value"
      >
        {{ item.name }}
      </select-option>
    </select>
  </div>
</template>

<script>
// 选项式API示例，组合式API只需要把对应逻辑改成setup写法即可
export default {
  data() {
    return {
      form: {
        model: {
          number: null, // 数字输入值
          unit: null    // 单位选中值
        }
      },
      currency_unit: [
        // 替换成你实际的单位列表数据
        // { name: '元', value: 'CNY' },
        // { name: '美元', value: 'USD' }
      ]
    }
  },
  methods: {
    onNumberInput(val) {
      // 数字被清空（值为null/undefined/空字符串）时，重置单位选中值
      if (val === null || val === undefined || val === '') {
        this.form.model.unit = null
      }
    }
  }
}
</script>

补充说明 #

如果不想用事件监听，也可以用watch监听form.model.number的值，变化时判断是否为空再重置unit字段，效果完全一致。如果业务上0是合法输入值，当前的判断逻辑不会误触发清空，只有输入值完全为空时才会重置单位、禁用选择框。

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