Could you please assist me in resolving this issue?
I've spent countless hours searching for a solution, but I can't seem to make it work. Vue is still very new to me.
Let me provide some more context.
I have an asynchronous component that is generated upon request. It has a template that organizes a form based on received JSON data. The component is being created successfully and loading all the fields correctly. Here is the structure:
<template>
<div class="constraint_supercontainer col-lg-12">
<form class="constraint_group" v-for="constraint in constraints.data.constraints" :key="constraint">
<div class="constraint_field">
<label class="constraint_label">{{constraint.label}}</label>
<select class="constraint_select" v-bind:name="constraint.name" v-bind:id="constraint.name">
<option value="" selected disabled>-- SELECT --</option>
<option v-for="value in constraint.values" :key="value" v-bind:value="value['value']">{{ value['label'] }}</option>
</select>
</div>
</form>
</div>
</template>
<script>
const api_route = "<api_route>";
export default {
name: 'Constraint',
async setup(){
const response = await fetch(api_route+'get-conditions');
const constraints = await response.json();
return { constraints };
}
};
</script>
Everything is working fine up to this point. However, in my main app constructor, I need to be able to create multiple instances of this component (Constraint) and render them within the same DOM element. In Vue2, I was able to achieve this using the Vue.extend function, which unfortunately no longer exists in Vue3. In Vue3, this functionality only works for the first element, and subsequent calls result in an error. Below is the structure of my main component:
<template>
<div id="app">
<div class="toolbar">
<button @click="add">Add conditional group</button>
</div>
<div id="constraints_list" ref="constraints_list">
<div v-for="item in constraints_group" :key="item">
<Suspense>
<Constraint></Constraint>
</Suspense>
</div>
</div>
</div>
</template>
<script>
import Constraint from './components/Constraint'
import { h } from 'vue';
export default {
name: 'app',
components: {
Constraint
},
data() {
return {
constraints_group: [],
constraint_count: 0,
constraint:{
gender: null
}
}
},
mounted () {
this.addConstraintBlock();
},
methods: {
addConstraintBlock() {
this.constraint_count++;
let instance = h(Constraint);
this.constraints_group.push(instance);
}
},
}
</script>
Here is the error I encounter when attempting to create a second instance: Error encountered while creating second component following the same steps as the first one
I came across a post at https://www.reddit.com/r/vuejs/comments/iwc7o4/vue3_what_happen_to_vueextend/ where someone "created a workaround for the Vue.extend function",but unfortunately, the project didn't work for me and gave me the following error:
Failed to compile.
./node_modules/mount-vue-component/dist/index.cjs.js 11:10
Module parse failed: Unexpected token (11:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| let vNode = vue.createVNode(component, props, children);
> if (app?._context) vNode.appContext = app._context;
| if (el) vue.render(vNode, el);
| else if (typeof document !== 'undefined' ) vue.render(vNode, el = document.createElement('div'));
I tried to understand how to use that loader, but despite installing it and configuring babel.config.json as suggested, I had no luck. I also attempted to recreate the code in the project, but it didn't work either.
At this juncture, I am out of ideas. Despite trying various solutions, everything results in an error. If anyone could offer me some guidance, a solution, or any insight, I would be extremely grateful.