[Vuejs]-Vue template isn't rendering in for loop

by

4👍

✅

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

👤skirtle

0👍

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’

👤cam

0👍

The problem is that when you do the loop in the <section v-for="section in sections" v-bind:key="section.title" :info="section"></section> the Array sections is not ready, there is nothing there.. so when you add new things to this array you need to trigger (computed prop) to send again the data to the section component.

👤Guilherme Epifanio

0👍

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.

👤Pete

Leave a comment