Vue ref call method from child component returns undefined method (v-for)

Question

I have got this child component and a button to trigger a method inside 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>

it renders the following (component) a specific number of times(usertype.max_user times)

    <template>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <td>
          <input
            v-model="userprofile.name"
            type="text"
            class="form-control"
            placeholder="z.B. Max"
          />
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Age</th>
        <td>
          <input
            v-model="userprofile.age"
            type="text"
            class="form-control"
            placeholder="z.B. 37"
          />
        </td>
      </tr> ...

in this (child) component aka i have a method which just logs some dummy text rn, but i'd like to get all the inputs the user has entered here. (its like a group profile where 2 user share one profile so if he selects 2 users then 2 forms get rendered and he can input the same stuff twice, for each user once,name age etc.)

I am trying to call this method from my parent in which i looped to create the vue user profiles such as this:

click: function() {
  this.$refs.userProfileComponent.functionInsideChildComponent();
}

and the error i receive 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 help is appreciated. im quite stuck here, thanks in advance.

edit: to clarification: i can get it working manually , if i say this.$refs.userProfileComponent[0].functionInsideChildComponent(); but this, yes, renders only the first and not all of em. So basically what I need is: on Button click -> loop through all of the vue user profile components, save the data into whatever with a variable indexer to distinguish form 1 from form 2 from ... etc, and emit this to the parent where i can do stuff with it.

If the problem is solved, post an answer. Don't answer the question in the question itself. — mzjn
And instead of adding [solved] in front of your question title you should accept your own answer. — t.niese

Coderz9 Coderz9 · Accepted Answer · 2019-09-06T12:11:39

I got the loop working with this:

  this.$refs.userProfileComponent.forEach(i => i.functionInsideChildComponent());

if you want to use multiple statements or functions inside change it to:

this.$refs.userProfileComponent.forEach(i => {
i.functionInsideChildComponent();
console.log("hello");
});

Vue ref call method from child component returns undefined method (v-for)

1 Answers