我有三个模板.AddCard.vue，图像卡.vue和视频卡.vue
AddCard.vue上有两个按钮，一个是添加图像卡，另一个是添加视频卡..我需要添加基于按钮点击的组件.这里有三个模板和我的索引.html文件.
指数html
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="app">
<div class="container">
<div id="dynamic_components">
<!-- add components here -->
</div>
<addcard></addcard>
</div>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
AddCard.vue
<template>
<div class="buttons">
ul class="no-margin-list">
<li @click="imagecard">
<span class="card_icon">
<img :src="'img/image.jpg'" >
</span>
<p>Add Image Card</p>
</a>
</li>
<li @click="videocard">
<span class="card_icon">
<img :src="'img/video.jpg'" >
</span>
<p>Add Video Card</p>
</a>
</li>
</div>
</template>
<script>
export default {
computed: {
},
methods: {
imagecard(val) {
//how to add image card
},
videocard() {
//how to add video card
}
},
}
</script>
图像卡.vue
<template>
<h1> I am a image Card </h1>
</template>
<script>
</script>
视频卡.vue
<template>
<h1> I am a Video Card </h1>
</template>
<script>
</script>
我需要在<div id="dynamic_components">中一个接一个地动态添加组件.用户可以添加任意数量的卡片.
如何动态添加组件.请给我指一个教程.