采用显示表单数据的组件会返回警告。警告是 [Vue warn]: Component is missing template or render function

Question

我想要显示信息的组件就是这个。它被称为Addedinfo

    <template>
  <section class = "container">
    <h1> My info </h1>
      <ul>
        <li v-for "info in information" :key="info.id"> {{ info.text }} </li>
      </ul>
    </section>
</template>

<script>
  export default {
    props: ["information"],
  };
</script>

Addedinfo 嵌套在一个叫 Belay 的组件中，就在这里

    <template>
  <div style = "text-align: left;">
    <h1>Enter Info</h1>
    <added-info :information="filteredInfos"></added-info>
    <add-information @add-info="another"> </add-information>
  </div>
</template>



<script>
  import { ref, computed } from 'vue';
  import AddInformation from "../components/AddInformation.vue";
  import AddedInfo from "../components/AddedInfo.vue";

  export default{
    components: {
      AddInformation,
      AddedInfo,

    },

    setup() {
      const infos = ref([]);

      const filteredInfos = computed(function() {
        return infos.value.filter(
          (info) => !info.text.includes("Angular") && !info.text.includes("React")
        );
      });

      function another(text) {
        const newVar = {
          id: new Date().toISOString(),
          text: text,
        };
        infos.value.push(newVar);
      }

      return {
        filteredInfos: filteredInfos,
        another: another
      };

    }
  };

</script>

组件 Addinfo（不包括在内）获取信息，组件 Additionalinfo 应该在 Belay 上显示它。相反，在输入信息并提交时。我收到以下错误-

[Vue warn]: Component is missing template or render function. 
  at <AddedInfo information= [] > 
  at <Belay onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

我该如何解决这个问题？ 谢谢。

Answer 1

在您的 AddInfo 组件模板中

<ul>
    <li v-for "info in information" :key="info.id"> {{ info.text }} </li>
</ul>

v-for 缺少“=”符号。应该是：

<ul>
    <li v-for="info in information" :key="info.id"> {{ info.text }} </li>
</ul>