Vue template isn't rendering in for loop

Question

So after following a beginner Vue tutorial to setup a Todo app, I decided to try to adapt some parts of it for a website I'm trying to make. What I'm stuck on is that despite everything saying my for-loop is supposed to work, it doesn't.

The project itself was created using the vue-cli, and most of the code copy-pasted from the tutorial. (which is working fine with its own for-loop)

It seems like the data might be not passed onto the template maybe?

I have tried:

1. having the info inside the props and data sections
2. passing whole object and only parameters to the template
3. tried with hard-coded values inside array which is iterated on

(After setting up a new vue-cli project:)

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>

Expected result: Display Section template on the website (after creating it with addSection that another script calls. Not included for brevity)

Actual result: Nothing is displayed, only a empty tag is added

Answer 1

I believe the problem is that you've called it Section . As <section> is a standard HTML element you can't use it as a component name.

There is a warning built into the library but it seems to be case sensitive, which isn't entirely helpful. Try changing your components section to this:

components: {
  CreateSection,
  section: Section
},

You should then see the warning.

The fix would just be to call it something else.

This is mentioned in the first entry in the style guide:

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

Answer 2

section is an existing HTML5 element, you should name your section component something different.

If you really want to name the component Section, register it as 'v-section'

Answer 3

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

Answer 4

Aside from the issue with using an existing HTML5 command as a name for your Vue component (you should change that to another name by the way), you should also look into how you declared the props within Section.vue. The code below shows the correct way to do it:

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

The props take in the name of the property being declared from the parent component and should be a string.

Hope this helps.