I am using Nuxt js and Element UI. I have imported element UI plugins dynamically in plugins folder.

export default () => {
  Vue.component("ElForm", () => import("element-ui/lib/form"));
  Vue.component("ElFormItem", () => import("element-ui/lib/form-item"));
  Vue.component("ElInput", () => import("element-ui/lib/input"));
  ......
}

Now when I open a modal dialog with a component inside of it. It returns ref error. It is probably because the component isn't loaded yet. How do I handle this scenario? Even nextTick isn't working.

<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      v-loading="loading"
      @submit.prevent.native="submitOnReturn"
    >
      <el-form-item label="Title" prop="title">
        <el-input v-model="form.title" ref="inputField" :autofocus="true" />
      </el-form-item>
      <el-form-item label="Details" prop="body">
        <el-input v-model="form.body" type="textarea" :rows="4" />
      </el-form-item>
      <el-form-item >
        <el-button type="" @click="cancel">Cancel</el-button>
        <el-button type="primary" @click="updateProductFaq" v-if="editMode"
          >Update</el-button
        >
        <el-button type="primary" @click="addProductFaq" v-else>Save</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

  mounted() {
    this.$nextTick(() => {
      // focus input on mount
      this.$refs.inputField.focus();
      this.$refs.ruleForm.clearValidate();
    });
  },

this.$refs.inputField is undefined

CodePudding user response：

The template ref of the el-input is not available in the containing component's mounted hook because the input is rendered asynchronously.

A workaround is to add a handler for the el-input's hook:mounted event (occurs with the component's mounted hook), where the template ref would have been populated:

<el-input ref="inputField" @hook:mounted="$refs.inputField.focus()" />