Vue3实现：基于输入数字控制单行输入框与复选框的禁用/启用

别搞10个单独变量，这完全没必要，还会让代码冗余到难以维护。正确的姿势是用数组对象来管理每一行的状态和数据，这样每行的操作完全独立，后续扩展功能（比如新增行）也会更轻松。

实现思路 #

1. 用数组存储每行数据，每个元素包含该行的input1值、input2值、复选框状态，通过input1的值动态判断是否启用后续控件。
2. 用v-model双向绑定输入值，省去手动处理keyup事件的麻烦，Vue会自动同步视图和数据。
3. 动态绑定disabled属性，根据input1是否为有效数字控制input2和复选框的启用状态。
4. 点击删除按钮时，直接清空对应行的所有数据，视图会自动同步状态。

完整代码实现 #

模板部分

<template>
  <div class="container-body" v-for="(row, index) in rows" :key="index">
    <div class="container-content"></div> 
    <div class="container-content">
      <input 
        :id="`Row${index+1}-input1`" 
        type="text" 
        v-model="row.input1"
        placeholder="请输入数字"
      >
    </div> 
    <div class="container-content">
      <input 
        :id="`Row${index+1}-input2`" 
        type="text" 
        v-model="row.input2"
        :disabled="!isValidNumber(row.input1)"
        :class="{ disabled: !isValidNumber(row.input1) }"
      >
    </div> 
    <div class="container-content">
      <div class="custom-control custom-checkbox">
        <input 
          :id="`Row${index+1}-checkbox`" 
          class="form-check-input" 
          type="checkbox" 
          v-model="row.checked"
          :disabled="!isValidNumber(row.input1)"
        >
      </div>
    </div> 
    <div class="container-content delete" @click="clearRow(index)">
      <img src="你的删除图标路径" alt="删除">
    </div>
  </div>
</template>

脚本部分（Composition API）

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

// 初始化10行数据，每行包含输入框值和复选框状态
const rows = ref(Array.from({ length: 10 }, () => ({
  input1: '',
  input2: '',
  checked: false
})))

// 判断输入是否为有效数字（支持正整数，需要小数可改成/^\d+(\.\d+)?$/）
const isValidNumber = (value) => {
  return /^\d+$/.test(value.trim())
}

// 清空指定行的所有值
const clearRow = (index) => {
  rows.value[index] = {
    input1: '',
    input2: '',
    checked: false
  }
}
</script>

关键细节说明 #

• 数组对象管理状态：每行的数据和状态都存在数组的对应元素中，修改某一行完全不会影响其他行，完美实现独立控制。
• 动态禁用逻辑：通过isValidNumber方法判断input1的有效性，直接绑定到disabled属性，视图会自动随数据变化更新。
• 双向绑定简化操作：v-model自动同步输入框和复选框的状态，不用手动写事件处理代码。
• 清空行逻辑：直接重置对应行的初始状态，所有绑定的控件会自动清空并恢复禁用状态。

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