My current school project involves creating a web app for dog walkers. I am currently working on a form to update the information of dogs owned by a user.
This data is stored in an array of objects, where each object represents a dog's information. I am using a v-for loop to iterate through the array and display a form for each dog. Below is the code snippet for the initial component:
<template>
<div class="body">
<h1 class="mt-3">Your Dogs</h1>
<b-row class="mt-1">
<div class="cards mx-5 mb-5">
<UpdatePets
v-for="pet in pets"
:key="pet.id"
:pet="pet"
:currentUser="currentUser"
:title="pet.dog_name"
tag="article"
style="max-width: 17rem;"
class="card">
</UpdatePets>
</div>
</b-row>
</div>
</template>
... (continued with remaining script and style elements)
The form does not prefill with the information as expected. The issue seems to lie in the UpdatePets component. Here's the code for that component:
<template>
<div class="body">
<b-row class="mt-1">
<div class="cards mx-5 mb-5">
<b-form @submit.prevent="updateMascota" class="pl-4">
... (form inputs omitted for brevity)
</b-form>
</div>
</b-row>
</div>
</template>
... (continued with remaining script and style elements)
I have also included a working example of updating a user's information successfully. The code snippet for that component is provided below:
<template>
<div class="home">
<div class="body">
<h1>Update User Information</h1>
<div class="SignUp">
... (form inputs and submit button omitted for brevity)
</div>
</div>
</div>
</template>
... (continued with remaining script and style elements)
If you can offer any guidance on why the form is not prefilling or provide insights based on the Vue Devtools screenshot shared here, it would be greatly appreciated. Thank you!