Failed to mount component: template or render function not defined.

报错:

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">