Vue.js 2中v-for语句内的过渡组

Question

我有一个axios调用后填写的projects对象。 然后，我循环使用v-for指令遍历projects对象。 这是代码：

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

在projects对象内部，我还有一个称为boards的对象，如上面的代码所示。 我的目标是要对boards对象的渲染进行动画处理。 因此，结果是我得到了这样的错误：

[Vue警告]：属性或方法“项目”未在实例上定义，但在渲染期间被引用。 通过初始化属性，确保在data选项中或对于基于类的组件，此属性都是反应性的。

和

[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'boards'”

如何正确渲染我的transition-group ？ 解决方法是什么？

这是一个Vue实例：

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

然后，我循环使用v-for指令遍历项目对象。

如果您的“项目”是一个对象，则项目在您的情况下表示项目属性，而您是项目对象的foreach属性。 根据您的代码，项目和开发板应该是数组，而不是对象。

您应该先检查响应数据：projects是否为数组。

情况一：

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

结果：aaa bbb

情况二：

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

结果：aaa bbb（但不能保证顺序。）

Answer 2

组件内部被vue.js替换的所有事物，因此您为<li>编写的代码被替换而没有任何意义。 为了使其正常工作，您需要将project作为prop传递给组件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也一样