Vue 模板未在 for 循环中呈现

Posted 2023-02-23

【中文标题】Vue 模板未在 for 循环中呈现

【英文标题】：Vue template isn't rendering in for loop

【发布时间】：2019-11-13 15:03:20

【问题描述】：

因此，在按照初学者 Vue 教程设置 Todo 应用程序后，我决定尝试调整其中的某些部分以适应我正在尝试制作的网站。我坚持的是，尽管一切都说我的 for 循环应该工作，但它没有。

项目本身是使用 vue-cli 创建的，大部分代码都是从教程中复制粘贴的。 （使用自己的 for 循环可以正常工作）

似乎数据可能没有传递到模板上？

我试过了：

在 props 和 data 部分中包含信息 将整个对象和仅参数传递给模板 尝试在迭代的数组中使用硬编码值

（设置新的 vue-cli 项目后：）

App.vue：

<template>
  <div id="app">
    <create-section v-on:create-section="addSection" />
    <section v-for="section in sections" v-bind:key="section.title" :info="section"></section>
  </div>
</template>

<script>
import CreateSection from "./components/CreateSection";
import Section from "./components/Section";
export default 
  name: "App",
  components: 
    CreateSection,
    Section
  ,
  data() 
    return 
      sections: []
    ;
  ,
  methods: 
    addSection(section) 
      this.sections.push(
        title: section.title,
        description: section.description
      );
      console.log(
        "Added to sections! : " + section.title + " | " + section.description
      );
      console.log("Sections length: " + this.sections.length);
    
  
;
</script>

Section.vue

<template>
  <div class="ui centered card">
    <div class="content">
      <div class="header"> info.title </div>
      <div> info.description </div>
    </div>
  </div>
</template>


<script type = "text/javascript" >
export default 
  props: info: Object,
  data() 
    return ;
  
;
</script>

预期结果： 在网站上显示部分模板（在使用另一个脚本调用的 addSection 创建它之后。为简洁起见不包括在内）

实际结果： 什么都不显示，只添加了一个空标签

【参考方案1】：

我认为问题在于您将其称为Section。由于<section> 是标准的 html 元素，您不能将其用作组件名称。

库中内置了一个警告，但它似乎区分大小写，这并不完全有帮助。尝试将您的 components 部分更改为：

components: 
  CreateSection,
  section: Section
,

然后您应该会看到警告。

解决方法就是将其称为其他名称。

这在样式指南的第一个条目中提到：

https://vuejs.org/v2/style-guide/#Multi-word-component-names-essential

【讨论】：

谢谢，确实是这个问题。我不知道该部分是现有的 html 元素，因为我是菜鸟

【参考方案2】：

section 是现有的 HTML5 元素，您应该为您的部分组件命名不同的名称。

如果你真的要命名组件Section，注册为'v-section'

【参考方案3】：

问题是，当您在<section v-for="section in sections" v-bind:key="section.title" :info="section"></section> 中执行循环时，数组sections 还没有准备好，那里什么都没有。所以当您向该数组添加新内容时，您需要触发（计算道具）再次将数据发送到section 组件。

【讨论】：

sections 数组在 data 中声明，因此它是反应式的。使用push 更新数组足以触发反应系统并重新渲染组件。不需要计算属性。

【参考方案4】：

除了使用现有 HTML5 命令作为 Vue 组件名称的问题（顺便说一下，您应该将其更改为另一个名称），您还应该查看如何在 Section.vue 中声明道具。下面的代码显示了正确的方法：

<script type = "text/javascript" >
export default 
  props: ['info'],
  data() 
    return ;
  
;
</script>

props 接受从父组件声明的属性的名称，并且应该是一个字符串。

希望这会有所帮助。

【讨论】：

也允许使用对象vuejs.org/v2/guide/components-props.html#Prop-Types，甚至推荐vuejs.org/v2/style-guide/#Prop-definitions-essential。我相信原始代码在这方面遵循了最佳实践。