¿Cómo coloco el v-model="item.checked" como la condición del if en las siguientes validations() ?
<table> <tr v-for="(item, i) of $v.timesheet.items.$each.$iter" > <div> <td> <input type="checkbox" v-model="item.checked" v-on:click="disable(i)" /> </td> <td> <input type="text" :id="'total_hour-' + i" /> </td> </div> </tr> <tr> <div> <td> <button type="button" class="btn btn-sm btn-primary" @click="itemCount++" >Add Row </button> </td> </div> </tr> </table> <script> import { required, minLength } from "vuelidate/lib/validators"; export default { data() { return { itemCount: 1, timesheet: { items: [{ total_hour: "", checked: false }] }, } }, methods: { disable(index){ const check = document.getElementById('total_hour-' + index).disabled $('#total_hour-' + index).attr('disabled', !check); } }, watch: { itemCount(value, oldValue) { if (value > oldValue) { for (let i = 0; i < value - oldValue; i++) { this.timesheet.items.push({ total_hour: "", checked: false, }) } } else { this.timesheet.items.splice(value); } } }, validations() { if ( ? ) { return { timesheet: { items: { required, minLength: minLength(1), $each: { total_hour: {required} } } } } } else { return { timesheet: { items: { required, minLength: minLength(1), $each: { total_hour: {} } } } } } } } </script>Entonces, según tengo entendido, desea que total_hour sea un campo obligatorio solo si la checked es verdadera. Vuelidate proporciona un buen validador incorporado para este propósito llamado requiredIf . Es un validador contextualizado para que pueda hacer referencia a una propiedad hermana.
import { required, requiredIf, minLength } from 'vuelidate/lib/validators'; export default { ... validations: { timesheet: { items: { required, minLength: minLength(1), $each: { total_hour: { required: requiredIf('checked'), }, }, }, }, }, } Otro problema que veo en su código es que está tratando de iterar sobre los campos $v. Los campos $v se usan para obtener estados de validación para sus campos, se supone que no debe configurar los campos $v. Usarlos como v-model para los componentes hará que vue establezca los campos $v. Prueba esto:
<tr v-for="(item, i) in timesheet.items">Entonces, hay algunas cosas para mejorar su código.
Reemplazar observador con un método
Los vigilantes son bastante difíciles de depurar y pueden causar efectos secundarios. Solo deben usarse cuando sea realmente necesario. En su lugar, cree un método, que agrega una fila:
addRow() { this.timesheet.items.push({ total_hour: "", checked: false, }) }Para eliminar una fila, haga lo mismo. Solo crea un método.
Crear un componente para cada entrada
Al crear subcomponentes para los elementos del parte de horas, puede manejar la validación más fácilmente y puede reaccionar mejor a los cambios en las entradas individuales.
<table> <TimesheetItemRow v-for="(item) of $v.timesheet.items.$each.$iter" :item="item" /> <tr> ... </tr> </table>Para realizar un seguimiento de todos los elementos del parte de horas en el componente principal, probablemente desee emitir un evento desde el componente secundario al principal, que contenga los datos de las nuevas entradas.
No use código jQuery o JavaScript para manipular DOM
Igual que antes, tales cosas deben usarse solo en casos súper, súper extremos. Uno de los beneficios de Frontend Frameworks como Vue.js es que no necesita hacer esto.
Ahora que tiene un componente para cada entrada, es fácil manejar la desactivación de su entrada directamente en la plantilla.
Este es un código (no probado) para el componente del elemento del parte de horas:
<template> <tr> <td> <input type="checkbox" value="item.checked @click="onClickCheckbox" /> </td> <td> <input type="text" @input="onUpdateTotalHour" :disabled="!item.checked /> </td> </tr> </template> <script> import { required } from "vuelidate/lib/validators"; export default { props: { item: { type: Object } }, methods: { onClickCheckbox (value) { this.$emit('on-click-checkbox', value) }, onUpdateTotalHour (value) { this.$emit('on-update-total-hour', value) } }, validations () { if (this.item.checked) { return { item: { total_hour: { required } } } } return { item: { total_hour: {} } } } } </script>El componente principal debe realizar un seguimiento de todos los elementos y debe reaccionar ante los eventos emitidos.