报错:
Failed to mount component: template or render function not defined.
模板代码:
<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>
解决
cuz索引未定义
<div v-for="annotation in annotations" :key="index">
修改为
<div v-for="(annotation, index) in annotations" :key="index">