如何使用if-else切换required表单校验并实现单行独立控制（修复全量切换问题）

你的问题根源在于用了全局的status变量来控制所有行的校验规则，所以点击任何一个checkbox都会切换所有行的必填状态。要实现每行独立控制，我们需要给每一行的item添加一个专属的状态属性，让校验规则只依赖当前行的这个属性。

下面是具体的修改步骤和完整代码：

1. 给每个item添加独立的可选状态属性 #

在timesheet.items的每个对象里新增isOptional字段，默认值为false（表示默认必填），同时移除全局的status变量：

data() {
  return {
    itemCount: 1,
    timesheet: { items: [{description: "", isOptional: false}] }
  }
}

2. 修改Checkbox的绑定逻辑 #

把Checkbox的点击事件改成双向绑定当前行的isOptional属性，这样点击时只会修改当前行的状态：

<input type="checkbox" v-model="item.isOptional">

3. 调整校验规则，依赖当前行的状态 #

修改validations函数，让description的required规则根据当前item的isOptional动态判断。这里我们可以给required传入一个函数，通过$each.$item访问当前行的item对象：

validations() {
  return {
    timesheet: {
      items: {
        required,
        minLength: minLength(1),
        $each: {
          description: {
            // 当isOptional为false时，才需要必填校验
            required: (value, vm) => !vm.$each.$item.isOptional
          }
        }
      }
    }
  }
}

4. 清理无用代码 #

移除全局的status变量、check方法，因为现在不需要它们了。

修改后的完整代码 #

<template> 
  <tr v-for="(item, i) of $v.timesheet.items.$each.$iter" :key="i"> 
    <td> 
      <input type="checkbox" v-model="item.isOptional"> 
    </td> 
    <td> 
      <input type="text" placeholder="Description" v-model="item.description"> 
    </td> 
  </tr> 
  <tr> 
    <td> 
      <button type="button" @click="itemCount++">Add Item</button> 
    </td> 
  </tr> 
</template> 
<script> 
import { required, minLength } from "vuelidate/lib/validators"; 
export default { 
  data() { 
    return { 
      itemCount: 1,
      timesheet: { items: [{description: "", isOptional: false}] } 
    } 
  }, 
  validations() { 
    return{
      timesheet: { 
        items: { 
          required, 
          minLength: minLength(1), 
          $each: { 
            description: {
              required: (value, vm) => !vm.$each.$item.isOptional
            }
          } 
        } 
      } 
    } 
  }, 
  watch: { 
    itemCount(value, oldValue) { 
      if (value == oldValue) { 
        return; 
      } 
      if (value > oldValue) { 
        for (let i = 0; i < value - oldValue; i++) { 
          // 新增item时也要带上isOptional默认值
          this.timesheet.items.push({ description: "", isOptional: false }); 
        } 
      } else { 
        this.timesheet.items.splice(value); 
      } 
    } 
  } 
} 
</script>

关键说明 #

• 每个item拥有独立的isOptional状态，确保操作某一行不会影响其他行
• 校验规则通过vm.$each.$item访问当前行的item，动态决定是否启用必填校验
• 使用v-model绑定Checkbox，简化状态更新逻辑，无需手动编写点击事件

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