如何解决在Vue.js中显示组件的多个实例
我对vue.js完全陌生,作为学习的一部分,我只是尝试创建一个按钮,每次按下该按钮时,都会添加一个注释(可拖动的文本框,用户可以在其中输入文本)将被创建。这是我目前拥有的:
<template>
<div id="app">
<button v-on:click="addAnnotation()">Add annotation</button>
<div v-for="(annotation,index) in annotations" :key="index">
<component :is="annotation">
</component>
</div>
</div>
</template>
<script>
import DraggableAnnotation from "./components/DraggableAnnotation.vue";
export default {
name: "App",components: {
DraggableAnnotation,},data: function () {
return {
annotations: [],};
},methods: {
addAnnotation: function () {
this.annotations.push({ DraggableAnnotation });
},};
</script>
<style>
#app {
font-family: Avenir,Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
我不确定我的实现是否正确。每次按下按钮时,我要创建一个注释,并将其添加到注释列表中。然后,我尝试使用v-for呈现注释列表,以向用户显示所有注释,但是由于我对DraggableAnnotation组件没有任何支持,因此我不确定将什么作为键传递
当我按下addAnnotation按钮时,在控制台日志中出现此错误。
vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<App>
<Root>
编辑:在此处定义索引
<div v-for="(annotation,index) in annotations" :key="index">
解决方法
我认为错误cuz索引未定义
<div v-for="annotation in annotations" :key="index">
代替
<div v-for="(annotation,index) in annotations" :key="index">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。