Question

我有一个看起来像这样的组件：

<task-list :content="lesson.children" :iterator="lesson.section" :user="user" @updateTask="updateTask"></task-list>

我在2个不同的页面中使用组件。在页面上，它按原样插入，在另一个页面中，其父级是v-for，所以看起来像：

<div class="lesson-list-item" v-bind:class="{ 'lesson-complete':  course.iterator_position > index}" v-for="(lesson, index) in content" >

   <task-list :content="lesson.children" :iterator="lesson.section" :user="user" @updateTask="updateTask"></task-list>

</div>

两个页面都有方法：

updateTask(index){

                var self = this;

                this.loaded     = false;
                this.iterator   = index;
                this.newTask    = index;
                setTimeout(function() { self.loaded = true }, 10);

            }

这就是任务列表在点击时发出的内容：

cardClick(index, slug, initialIterator){

                console.log(index);

                if( index <= this.initialIterator){
                  this.$emit('updateTask', index);
                }

            }

未包含在v-for中的页面，它永远不会收到emit事件的页面。

Answer 1

我认为您的组件不会发出updateTask事件。

将此添加到您要触发事件的方法：this.$emit('updateTask');

vue custom emit在v-for中不起作用

1 个答案: