Question

因此，在按照Vue初学者教程设置了Todo应用程序之后，我决定尝试将其某些部分调整为我要创建的网站。我坚持的是，尽管一切都说我的for循环应该起作用，但事实并非如此。

项目本身是使用vue-cli创建的，并且大部分代码是从教程中复制粘贴的。（在自己的for循环中效果很好）

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

我尝试过：

在道具和数据部分中包含信息
将整个对象和仅参数传递给模板
尝试对数组内的硬编码值进行迭代

（在建立新的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创建它之后。为简便起见，不包括在内）

实际结果：什么都没有显示，仅添加了一个空标签

Answer 1

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

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

components: {
  CreateSection,
  section: Section
},

然后您应该会看到警告。

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

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

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

Answer 2

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

如果您确实要命名组件Section，请将其注册为“ v-section”

Answer 3

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

Answer 4

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

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

道具使用从父组件声明的属性的名称，并且应该是字符串。

希望这会有所帮助。

Vue模板未在for循环中呈现

4 个答案: