So i have a table and inside table i have tr's with a v-for loop
it looks something like this:
<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>
now I am trying to validate the input on focus out with this function: (i have this function called on the first two textarea in above code)
checkInput(name, itemIndex){
if(this.documentItems[itemIndex].name == ""){
this.errors[itemIndex].name.push("To polje je obvezno.");
};
console.log(this.errors);
},
the problem here is that when I call this.documentItems[itemIndex].name it looks into the documentItems name and not the function parameter name. So it outputs this error
Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'name')"
how could I fix this?
Try like following 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>Just remove all [index] in your v-model first like this:
<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>
and than update your script like this:
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);
},
Could not test it out right now, but it should work like this.. give me short feedback if this works for you..