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 class="form-buttons">
<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
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()" />
👆