After completing a basic Vue tutorial on setting up a Todo app, I decided to integrate some aspects of it into a website I am developing. However, I have encountered an issue with my for-loop that is not functioning as expected.
The project was initially set up using vue-cli, and the majority of the code was copied from the tutorial (which works flawlessly with its own for-loop).
It appears that the data may not be properly passed to the template.
I have attempted the following troubleshooting steps:
- Including the information within the props and data sections
- Passing both the entire object and individual parameters to the template
- Trying hard-coded values inside the array being iterated upon
(After establishing 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 outcome: The Section template should be displayed on the website after creating it with the addSection method called by another script. The addSection method is not included here for brevity.
Actual outcome: No content is displayed, only an empty tag is added.