你能帮我解决这个问题吗
经过长时间的寻找答案，我找不到一种方法来解决这个问题。我真的是Vue的新手
让我再解释一下。
我有一个异步组件，它是在调用时创建的。它有一个模板，该模板以接收到的JSON为基础构建表单。该组件创建正常，并且正在以正确的方式加载所有字段。这就是结构：
<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>-- SELECCIONE --</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>
在这一步中，一切都很好。但在主应用程序构造函数中，我需要有一种方法来创建该组件(Constraint(的多个实例，并在同一DOM元素中呈现它们。我在Vue2中用Vue.extend函数找到了实现这一点的方法，但现在它已经不存在了。在Vue3中，这只适用于第一个元素，如果我再次调用该函数，它会给出一个错误。这是我的主要组件的结构：
<template>
<div id="app">
<div class="toolbar">
<button @click="add">Agregar grupo condicional</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>
这是我尝试创建第二个时的错误：这是我创建第二个组件并尝试执行与第一个相同的流程时出现的错误
我在这篇文章中发现https://www.reddit.com/r/vuejs/comments/iwc7o4/vue3_what_happen_to_vueextend/一个"；创建Vue.extend函数的变通方法"；，但是这个项目对我不起作用，它给了我以下错误：
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'));
我试图弄清楚如何使用该加载程序，但再次失败，即使在我安装了加载程序(和许多其他加载程序(、配置了babel.config.json(正如我所发现的(等之后。我也试图在项目中重新创建代码，但都不起作用。
所以，在这一点上，我没有更多的想法。我试图找到更多的方法，但我做的每一件事都给了我一个错误。如果有人能给我一个想法、解决问题的方法或其他什么，我会非常感激。
我觉得这不是关于Vue 3，而是关于Vue。。。
在Vue中，您几乎从不在<script>块中创建组件实例(有些人会这样做，但通常是因为他们不了解Vue的工作原理(。Vue是"；陈述性的"；以及"；数据驱动的"；框架这意味着你的模板输出是由数据驱动的——你不创建组件，你修改数据，模板会根据数据为你生成组件。。。
检查这个简单的例子：
const piece = Vue.component('Piece', {
props: ['number'],
template: `<div> Piece {{ number }} </div>`
})
const app = new Vue({
el: "#app",
components: { piece },
data() {
return {
counter: 0,
pieces: []
}
},
methods: {
addPiece() {
this.pieces.push(this.counter)
this.counter++
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button type="button" @click="addPiece">Add Piece</button>
<hr>
<Piece v-for="piece in pieces" :key="piece" :number="piece"/>
</div>