Utilizing Nuxt js and Element UI, I have dynamically imported Element UI plugins in the 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"));
......
}
When opening a modal dialog with a component inside it returns a reference error. This might be due to the component not being loaded yet. How can this scenario be handled? Even nextTick does not seem to work.
<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