Transition-group inside v-for statement in Vue.js 2

Question

I have a projects object which I fill in after axios call. Then I'm looping though projects object using v-for directive. Here's code:

<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>

Inside projects object I also have an object of objects called boards as you can see in the code above. My goal is that I want to animate a rendering of boards object. So, as a result I'm getting such 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 to properly render my transition-group ? What's the workaround?

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();
    }
});

Answer 1

Then I'm looping though projects object using v-for directive.

If your "projects" is a object , the project in your case means projects attribute and you are foreach attributes of projects object. According to your code, the projects and boards should be array, not object.

You should check if the response data: projects is an array first.

case I:

var objects = [{id:1,project_name:'aaa'},{id:2, project_name:'bbb'}]

result: aaa bbb

case II:

var objects = {attr1: {id:1, project_name:'aaa'}, attr2: {id:2, project_name:'bbb'}}

result: aaa bbb (but the order is not guaranteed.)

Answer 2

All things replaced by vue.js inside component so you code for <li> is replace without any meaning. To make it work you need to pass project as prop to your component transition-group

 Vue.component('transition-group',{ props:['project'], template:`<div> <li v-for="board in project.boards" :key="board.id">{{ board.board_name }}</li> </div> ` }); const app = new Vue({ el: '#app', data: { user: {name:'niklesh raut'}, projects: [] }, methods: { fetchProjects() { this.projects = [{id:1,project_name:'test1',boards:[{id:11,board_name:'board_name11'}]},{id:2,project_name:'test2',boards:[{id:11,board_name:'board_name22'}]}] } }, mounted() { this.fetchProjects(); } }); 

 <script src="https://npmcdn.com/vue/dist/vue.js"></script> <div id="app" class="container-fluid"> <ul class="row projects-list"> <li v-for="project in projects" :key="project.id"> {{ project.project_name }} <br> <transition-group :project="project" tag="ul" enter-active-class="animated fadeInUp" leave-active-class="animated fadeInDown"> </transition-group> </li> </ul> </div> 

JSFiddle for the same