I’m working in a legacy project where we have both Vue 3 (migrated from Vue2) and jQuery.
I have wrapped some form fields within Vue components, like this:
Outlet.vue
<template>
<div :class="`form-group outlet-field step-${step}`">
<label class="label-name">
{{ label }}
<tooltip :required="required" :help="help" />
</label>
<select
:name="name"
:required="required"
:disabled="isSelectDisabled"
@change="onSelectionChange"
>
<option
v-for="choice in filteredChoices"
:value="choice.value"
:key="choice.value"
>
{{ choice.label }}
</option>
</select>
</div>
</template>
<script>
export default {
name: "Outlet",
props: ["id", "name", "label", "choices", "required", "step", "help"],
data() {
return {
filteredChoices: [],
};
},
mounted() {
console.log('mounted');
},
methods: {
// Some methods here
},
};
</script>
I have few more similar components: Zip.vue
, Datepicker.vue
, etc.
The components are working fine when imported and loaded from the beginning, but I encountered problems when I render an entire form from the server async.
The request of my front-end app starts in form.js
:
const formWrapper = $('#ajax-form-wrapper');
formWrapper.hide();
$.ajax({
url: 'url-to-server',
success: function (response) {
formWrapper.html(response.form);
formWrapper.show();
// Load Vue components that are included within response.form markup
}
});
Basically, server responds with form
key and its value is an entire form with different fields (regular HTML fields and Vue components as fields).
Ex.
'form' => '<div>
<input type="text">
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
<zip></zip>
<outlet></outlet>
...
</div>
At the moment, I can see only the regular form fields from the entire fields, while the Vue components are not rendered, but only stored in DOM with their original Vue name (
The main Vue file which initializes Vue, is in another file: app.js
, but I don’t think this is relevant.
Important. These form is rendered in a modal, so that’s why I want to lazy-load these fields/Vue components only when needed. Therefore, I probably need to destroy these components once the modal is closed, right?
I read about using defineAsyncComponent
method, but still, the Vue components are not being rendered and also don’t get any error.
Any hints are welcome. Thanks