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

by

0👍

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

👤melson.jao

0👍

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

👤Niklesh Raut

Leave a comment