Question

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

<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警告]：属性或方法“项目”未定义实例，但在渲染期间引用。确保此属性是无论是在数据选项中，还是在基于类的组件中，都是反应性的初始化财产。

和

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

如何正确呈现我的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指令循环项目对象。

如果你的＆＃34;项目＆＃34;是一个对象，在您的情况下项目意味着项目属性，您是项目对象的foreach属性。根据你的代码，项目和板应该是数组，而不是对象。

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

案例I：

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 for the same

Vue.js中的v-for语句中的转换组

2 个答案: