$refs 未加载到 Vue.js 组件上

Question

我在 Vue.js 中有一个组件，它有一个模态视图，里面有不同的引用。

<template>
  <div>
    <b-modal
      ref="modalDialog"
    > 
    <b-row>
       <!-- document -->
       <b-col>
         <document-creation ref="documentCreation"/>
       </b-col>
    </b-row>
    <patient-creation-or-detection ref="patientCreationOrDetection" />
    ....
    </b-model>

    <confirmation-dialog
      ref="confirmAndCreatePatient"
    />
    ...
  </div>
</template>

在我拥有的组件内

clearInputs () {
   this.$refs.patientCreationOrDetection.clearValue()
},

我在项目的不同地方使用了这个组件，它适用于除一个之外的所有情况。

在这一次事件中，我遇到了错误

undefined as no function clearValue()

。

如果我打印出此事件中的 $refs，则模型视图内的所有引用均未定义，但外部的其他引用（例如

confirmAndCreatePatient

）不为空。 所有元素都是可见的，可以交互和工作（如果不调用 $refs）

此外：当我收到错误并且模态视图下方的页面出现此错误时，引用已定义。因此，如果我第一次单击clearInputs 按钮两次，this.$refs.patentCreationOrDetection 未定义，则错误会被指控，第二次 this.$refs.patentCreationOrDetection 是一个有效对象。 这不是时间问题，因为如果我放入 if 语句：

clearInputs () {
  if (this.$refs.patientCreationOrDetection) {
    this.$refs.patientCreationOrDetection.clearValue()  
  }
},

我可以整天点击这个并且永远不会触发。

这种行为的解释是什么？

我使用 Nuxt 和 Vue 框架。

Answer 1

您是否在方法中定义了clearValue函数？ 像下面这样吗？

methods: {
    clearValue() {
      // Implement your logic to clear values here
    }
  }