Validate dynamic input field in vue.js - vue.js

Question

I have a table in which I add the input field dynamically and I set the validation manually by using Toastr notifications . what the problem is that when I add the input at the first time the validation is working perfectly but when I add another input the validation is not working on new added input. I have tried and searched for the solution but I did not find any solution.Any help will be highly appreciated.
My HTML code :
<table class="table-hover" id="form">
<thead>
<tr>
<th>پلورنکی</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, $index) in rows" :key="row.id">
<td>
<input
dir="rtl"
id="supplier_id1"
v-model="row.supplier_id1"
placeholder="نیټه "
type="text"
name="supplier_id1"
class="form-control"
/>
</td>
</tr>
</tbody>
</table>
<button
class="btn btn-success btn-xs"
#click="getData()"
>
خوندی کړی
</button>
My script code :
export default {
data() {
return {
rows: [
{
supplier_id1: "",
}
],
}
}
methods: {
getData: function() {
if (this.rows[0].supplier_id1 == "") {
toast.fire({
icon: "warning",
html: "<h5> supplier id is required.</h5>"
});
} else {
//if the input is not emptyexecute the coed successfully
}
}
}
}

Answer 1

You will always check for the first row, because of if (this.rows[0]...)
rows[0] will always take the first object in your array
If you always want to validate all the rows, you could check if there are any rows without a supplier id: if (this.rows.filter((row) => row.supplier_id1 === "").length)

Answer 2

I not sure which toast component did you used, but i can do similar mock for your validation message + databinding of your {{row.supplier_id1}}
v-model value of input[type="date] will only valid when you inputted date correctly so this.rows[0].supplier_id1.length == 0 to validate is fine. The reactivity is working fine.
My Working Fiddle: https://jsfiddle.net/bu9twps2/
UPDATE: Your original condition to validate works fine as well, problem likely lies at your toast