0
297
ViewsCó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 answers
Answer question0
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
Report
Answer question