I am facing an issue with a child component and a button that triggers a method within it:
<div v-for="(i,index) in user.usertype.max_user" :key="index" class="d-flex w-50">
<vue-user-profiles ref="userProfileComponent"></vue-user-profiles>
</div>
<button @click="click">Click</button>
This code snippet renders the specified component multiple times based on usertype.max_user value.
<template>
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
&td>
<input
v-model="userprofile.name"
type="text"
class="form-control"
placeholder="e.g. Max"
/>
</td>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Age</th>
&td>
<input
v-model="userprofile.age"
type="text"
class="form-control"
placeholder="e.g. 37"
/>
</td>
</tr> ...
Within this child component, I have a method that currently logs dummy text, but ideally, I would like to retrieve all the user inputs entered here (for each rendered form).
I am attempting to call this method from the parent component where I looped to create the vue user profiles as shown below:
click: function() {
this.$refs.userProfileComponent.functionInsideChildComponent();
}
The error message I encountered is:
Error in v-on handler: "TypeError: this.$refs.userProfileComponent.loger is not a function"
found in
---> <VueProfileEdit> at resources/js/components/VueProfileEdit.vue
Any assistance or suggestions would be greatly appreciated. I am currently stuck on this problem, thank you in advance.
Edit: For clarification, I can make it work manually by using this.$refs.userProfileComponent[0].functionInsideChildComponent(); however, this only targets the first component and not all of them. What I need is to loop through all the vue user profile components upon button click, store the data with a variable indexer to differentiate between different forms, and send this data to the parent component for further processing.