Así que tengo una mesa y dentro de la mesa tengo tr con un bucle v-for
se ve algo como esto:
<tr v-for="(item, index) in documentItems" :key="item.id" class="border-b border-l border-r border-black text-center"> <td>{{index + 1}}.</td> <td class=""> <div class="flex items-center itemContainer"> <textarea @focusout="checkInput('barcode',index)" v-model="item.barcode" id="" cols="15" rows="2" class="text-center item-box trigger"> </textarea> <span class="tooltip"> test123 </span> </div> </td> <td class="px-3"> <div class="flex items-center py-0.5 itemContainer"> <textarea @focusout="checkInput('product_name',index)" v-model="item.product_name" id="" cols="26" rows="2" class="text-sm text-center item-box trigger"> </textarea> <span class="tooltip" style="left: 5px;"> test123 </span> </div> </td> </tr>ahora estoy tratando de validar la entrada al enfocarme con esta función: (tengo esta función llamada en las dos primeras áreas de texto en el código anterior)
checkInput(name, itemIndex){ if(this.documentItems[itemIndex].name == ""){ this.errors[itemIndex].name.push("To polje je obvezno."); }; console.log(this.errors); },el problema aquí es que cuando llamo a this.documentItems[itemIndex].name busca en el nombre de documentItems y no en el nombre del parámetro de función. Así que sale este error
Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'name')"¿Cómo podría arreglar esto?
Intente seguir this.documentItems[itemIndex][name] :
new Vue({ el: '#demo', data() { return { documentItems: [{id: 1, barcode: 99, product_name: 'aaa'}], errors: [] } }, methods: { checkInput(name, itemIndex){ console.log(this.documentItems[itemIndex]) if(this.documentItems[itemIndex][name] == ""){ this.errors.push(name, "To polje je obvezno."); }; console.log(this.errors); }, } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <table> <tr v-for="(item, index) in documentItems" :key="item.id" class="border-b border-l border-r border-black text-center"> <td>{{index + 1}}.</td> <td class=""> <div class="flex items-center itemContainer"> <textarea @focusout="checkInput('barcode', index)" v-model="item.barcode" id="" cols="15" rows="2" class="text-center item-box trigger"> </textarea> <span class="tooltip"> test123 </span> </div> </td> <td class="px-3"> <div class="flex items-center py-0.5 itemContainer"> <textarea @focusout="checkInput('product_name', index)" v-model="item.product_name" id="" cols="26" rows="2" class="text-sm text-center item-box trigger"> </textarea> <span class="tooltip" style="left: 5px;"> test123 </span> </div> </td> </tr> </table> </div>Simplemente elimine todo [index] en su modelo v primero así:
<tr v-for="(item, index) in documentItems" :key="item.id" class="border-b border-l border-r border-black text-center"> <td>{{index + 1}}.</td> <td class=""> <div class="flex items-center itemContainer"> <textarea @focusout="checkInput(barcode, index)" v-model="documentItems.barcode" id="" cols="15" rows="2" class="text-center item-box trigger"></textarea> <span class="tooltip"> test123 </span> </div> </td> <td class="px-3"> <div class="flex items-center py-0.5 itemContainer"> <textarea @focusout="checkInput(product_name, index)" v-model="documentItems.product_name" id="" cols="26" rows="2" class="text-sm text-center item-box trigger"></textarea> <span class="tooltip" style="left: 5px;"> test123 </span> </div> </td> </tr>y luego actualice su script de esta manera:
checkInput(name, itemIndex){ console.log(itemIndex); //You don't need this parameter if(this.documentItems.name == ""){ this.errors.name.push("To polje je obvezno."); }; console.log(this.errors); },No pude probarlo en este momento, pero debería funcionar así... déjeme un breve comentario si esto funciona para usted...