OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Load Vue.js component async

  • Thread starter Thread starter Catalin Farcas
  • Start date Start date
C

Catalin Farcas

Guest
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

Code:
<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:

Code:
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.

Code:
'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 (<outlet step="1" other-custom-props="test">

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

<p>I'm working in a legacy project where we have both Vue 3 (migrated from Vue2) and jQuery.</p>
<p>I have wrapped some form fields within Vue components, like this:</p>
<p><code>Outlet.vue</code></p>
<pre><code><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>

</code></pre>
<p>I have few more similar components: <code>Zip.vue</code>, <code>Datepicker.vue</code>, etc.</p>
<p>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.</p>
<p>The request of my front-end app starts in <code>form.js</code>:</p>
<pre><code>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
}
});
</code></pre>
<p>Basically, server responds with <code>form</code> key and its value is an entire form with different fields (regular HTML fields and Vue components as fields).
Ex.</p>
<pre><code>'form' => '<div>
<input type="text">
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
<zip></zip>
<outlet></outlet>
...
</div>

</code></pre>
<p>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 (<code><outlet step="1" other-custom-props="test"></code></p>
<p>The main Vue file which initializes Vue, is in another file: <code>app.js</code>, but I don't think this is relevant.</p>
<p>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?</p>
<p>I read about using <code>defineAsyncComponent</code> method, but still, the Vue components are not being rendered and also don't get any error.</p>
<p>Any hints are welcome. Thanks</p>
 

Latest posts

S
Replies
0
Views
1
Safwan Aipuram
S
Top