Question

我有这个子组件和一个按钮来触发其中的方法：

      <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>

它将以下（组件）呈现特定的次数（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> ...

在这个（子）组件中，我也有一种只记录一些虚拟文本rn的方法，但是我想获得用户在此处输入的所有输入。（这就像一个群组个人资料，其中2个用户共享一个个人资料，因此，如果他选择2个用户，则将呈现2个表单，并且他可以为每个用户输入两次相同的内容，每次输入一次，命名年龄等。）

我正在尝试从我的父母那里调用此方法，我在其中循环创建了这样的vue用户配置文件：

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

我收到的错误是：

Error in v-on handler: "TypeError: this.$refs.userProfileComponent.loger is not a function"

found in

---> <VueProfileEdit> at resources/js/components/VueProfileEdit.vue

感谢您的帮助。我非常困在这里，在此先感谢。

编辑：澄清一下：如果我说这个，我可以使其手动工作。$ refs.userProfileComponent [0] .functionInsideChildComponent（）;但这是的，仅呈现em的第一个而不是全部。所以基本上我需要的是：在Button上单击->遍历所有vue用户配置文件组件，使用变量索引器将数据保存到任何内容中，以区分形式1与形式2与...，然后将其发送给父对象在这里我可以做些什么。

Answer 1

我正在使用此循环：

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

如果要在内部使用多个语句或函数，请将其更改为：

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

子组件的Vue ref调用方法返回未定义的方法（v-for）

1 个答案: