I am working with a projects object that I populate after making an axios call. Then, I am using a v-for directive to loop through the projects object. Here is the code snippet:
<ul class="row projects-list">
<li v-for="project in projects" :key="project.id">
@{{ project.project_name }} <br>
<transition-group tag="ul" enter-active-class="animated fadeInUp" leave-active-class="animated fadeInDown">
<li v-for="board in project.boards" :key="board.id">@{{ board.board_name }}</li>
</transition-group>
</li>
</ul>
Within the projects object, there is also an object named boards, as shown in the above code. My objective is to animate the rendering of the boards object. However, I encounter the following errors:
[Vue warn]: Property or method "project" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
and
[Vue warn]: Error in render: "TypeError: Cannot read property 'boards' of undefined"
How can I properly render my transition-group? Is there a workaround for this issue?
Here's a Vue instance:
const app = new Vue({
el: '#app',
data: {
user: {!! Auth::user() !!},
projects: {}
},
methods: {
fetchProjects() {
axios.get(`/api/projects/${this.user.id}`)
.then((response) => {
if(response.status === 200) {
this.projects = response.data;
console.log(this.projects);
}
})
.catch(function(error) {
console.error(error);
});
}
},
mounted() {
this.fetchProjects();
}
});