[英]Vue.js emit doesn't provoke parent method to execute
I just started experimenting with Vue.js我刚开始试验 Vue.js
I try to implement crud operations in a Todo app using Vue.js我尝试使用 Vue.js 在 Todo 应用程序中实现 crud 操作
My code fails to delete a todo item我的代码无法删除待办事项
The deletion of a todo item is implemented in the parent class在父 class中实现了一个 todo 项的删除
<template>
<div>
<p>Completed Tasks: {{todos.filter(todo => {return todo.done === true}).length}}</p>
<p>Pending Tasks: {{todos.filter(todo => {return todo.done === false}).length}}</p>
// we are now passing the data to the todo component to render the todo list
<todo v-for="todo in todos" v-bind:todo="todo" v-bind:key="todo.id"></todo>
</div>
</template>
<script type = "text/javascript" >
import Todo from './Todo';
export default {
props: ['todos'],
components: {
Todo,
},
methods: {
completeTodo(todo) {
const todoIndex = this.todos.indexOf(todo);
this.todos[todoIndex].done = true;
},
deleteTodo(todo) {
const todoIndex = this.todos.indexOf(todo);
this.todos.splice(todoIndex, 1);
},
},
};
</script>
The delete action is an event on the child class , which should trigger the delete action in the parent删除操作是子级 class上的事件,它应该触发父级中的删除操作
<template>
<div class='ui centered card'>
// Todo shown when we are not in editing mode.
<div class="content" v-show="!isEditing">
<div class='header'>
{{ todo.title }}
</div>
<div class='meta'>
{{ todo.project }}
</div>
<div class='extra content'>
<span class='right floated edit icon' v-on:click="showForm">
<i class='edit icon'></i>
</span>
/* add the trash icon in below the edit icon in the template */
<span class='right floated trash icon' v-on:click="deleteTodo(todo)">
<i class='trash icon'></i>
</span>
</div>
</div>
// form is visible when we are in editing mode
<div class="content" v-show="isEditing">
<div class='ui form'>
<div class='field'>
<label>Title</label>
<input type='text' v-model="todo.title" />
</div>
<div class='field'>
<label>Project</label>
<input type='text' v-model="todo.project" />
</div>
<div class='ui two button attached buttons'>
<button class='ui basic blue button' v-on:click="hideForm">
Close X
</button>
</div>
</div>
</div>
<div class='ui bottom attached green basic button' v-on:click="changeStatus(todo)" v-show="!isEditing && todo.done" disabled>
Completed
</div>
<div class='ui bottom attached red basic button' v-on:click="completeTodo(todo)" v-show="!isEditing && !todo.done">
Pending
</div>
</div>
</template>
<script>
export default {
props: ['todo'],
data() {
return {
isEditing: false,
};
},
methods: {
showForm() {
this.isEditing = true;
},
hideForm() {
this.isEditing = false;
},
completeTodo(todo) {
this.$emit('complete-todo', todo);
},
changeStatus(todo){
todo.done = !todo.done;
},
deleteTodo(todo) {
this.$emit('delete-todo', todo);
},
},
};
</script>
You need to add v-on:complete-todo="completeTodo"
and v-on:deleteTodo="deleteTodo"
to your <todo>
s.您需要将
v-on:complete-todo="completeTodo"
和v-on:deleteTodo="deleteTodo"
添加到您的<todo>
中。
( or @complete-todo="completeTodo"
instead of v-on:
( 或
@complete-todo="completeTodo"
而不是v-on:
if you are using Vue3, your Todo.vue
also needs a list of events that this component can propagate如果您使用的是 Vue3,您的
Todo.vue
还需要该组件可以传播的事件列表
emits: ['delete-todo', 'complete-todo'],
<todo v-for="todo in todos" v-bind:todo="todo" v-bind:key="todo.id" @delete-todo="deleteTodo" @ complete-todo="completeTodo"></todo>
try this尝试这个
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.