0
287
VistasCómo alternar la validación 'requerida' usando if-else
Tengo un campo de entrada de description que quiero que no sea obligatorio marcando la casilla de verificación (mientras que al desmarcarla hará lo contrario).
Esto es lo que he hecho:
<template> <tr v-for="(item, i) of $v.timesheet.items.$each.$iter"> <td> <input type= "checkbox" v-on:click= "check(i)" status="status"> </td> <td> <input type="text" placeholder="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 { status: false, itemCount: 1, timesheet: { items: [{description: ""}] } } }, validations() { if (this.status == false) { return{ timesheet: { items: { required, minLength: minLength(1), $each: { description: { required }}, } } } } else { return{ timesheet: { items: { required, minLength: minLength(1), $each: { description: { }} } } } } }, watch: { itemCount(value, oldValue) { if (value == oldValue) { return; } if (value > oldValue) { for (let i = 0; i < value - oldValue; i++) { this.timesheet.items.push({ description: "" }); } } else { this.timesheet.items.splice(value); } } }, methods: { check(index){ this.status = !this.status; } } } </script>Esto alterna todas las filas a la vez en lugar de trabajar en la única fila individual prevista.
¿Cómo soluciono el cambio para que funcione solo en esa fila específica?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Si necesita realizar un seguimiento de un valor por fila, ese valor debe mantenerse con cada elemento individual que representa la fila.
Luego, si pasa el evento y el índice (o una identificación única), puede actualizar sus datos en el método con el nuevo valor.
<template> <div class="hello"> <h1>Result</h1> <ul> <li v-for="(person, i) in persons" :key="i"> <label >name: <input :value="person.name" @change="changeName($event, i)" /> </label> <label> status: <input type="checkbox" :checked="person.status" @change="check($event, i)" /> </label> </li> </ul> </div> </template> <script> export default { name: "HelloWorld", data() { return { persons: [ { name: "Karl", status: false }, { name: "Irma", status: true }, { name: "David", status: false }, ], }; }, methods: { check(event, index) { this.persons[index].status = event.target.value === "on"; }, changeName(event, index) { this.persons[index].name = event.target.value; }, }, }; </script> 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta