Vue中如何将v-model绑定的item.checked作为validations()的if判断条件

解决方法 #

你当前的写法误区是将判断逻辑放在validations根层级的全局分支中，这是错误的：勾选状态是每行独立的，需要针对每个子项单独判断是否需要校验total_hour，不需要全局做if/else返回两套校验规则。

步骤1：调整依赖导入

导入Vuelidate内置的requiredIf条件校验器：

import { required, minLength, requiredIf } from "vuelidate/lib/validators";

步骤2：重写validations配置

删除原来的全局if/else分支，给total_hour绑定条件必填规则：

validations() {
  return {
    timesheet: {
      items: {
        required,
        minLength: minLength(1),
        $each: {
          total_hour: {
            // 仅当当前行checked为true时，total_hour才必填
            required: requiredIf(item => item.checked)
          }
        }
      }
    }
  }
},

步骤3：修正模板逻辑（可选优化，建议修改）

你目前的模板有两处问题：

• total_hour输入框没有绑定v-model，Vuelidate无法获取输入值做校验
• 用jQuery手动操作DOM控制禁用状态不符合Vue数据驱动的设计，可以直接用状态绑定简化
  修改后的模板代码：

<table>
    <tr v-for="(item, i) of $v.timesheet.items.$each.$iter" >
        <div>
            <td>
                <input 
                    type="checkbox" 
                    v-model="item.checked" 
                />
            </td>
            <td>
                <input 
                    type="text" 
                    :id="'total_hour-' + i"
                    v-model="item.total_hour"
                    :disabled="!item.checked"
                />
            </td>
        </div>
    </tr>
    <tr>
        <div>
            <td>
                <button 
                    type="button" 
                    class="btn btn-sm btn-primary" 
                    @click="itemCount++"
                >Add Row
                </button>
            </td>
        </div>
    </tr>
</table>

修改后可以直接删掉原来冗余的disable方法，不需要手动操作DOM。

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