I'm building a farm management application with Laravel and Vue using Inertia
I have the following tables
products (id, name, ...)
nutrients (id, name, ...)
nutrient_product (nutrient_id, product_id, ratio, ...)
In the Produtcs/Create.vue component I'm generating multiple html inputs using v-for directive like so
<div v-for="nutrient in nutrients" :key="nutrient.id">
<Input v-model="ratio" type="text" />
</div>
The main purpose here is to store the value of ratio for each generated nutrient in the nutrient_product table
I tried to store the ration value for each input in an array but negative. Not sure how to handle this
I'm glad I can help you.
Please try with the below code:
<div v-for="nutrient in nutrients" :key="nutrient.id">
<Input v-model="ratio[nutrient.id]" type="text" />
</div>
You will get easily all inputs values in array like below
ratio[{
1: 'Lorem ipsum',
2: 'Test Value',
nutrientID: nutrientValue
}]
Thanks!