更符合 vuejs 的这种精神，避免 refs 和在子组件中具有状态。
应用程序包含项目和过滤器，todolist.vue 将道具绑定到过滤列表（计算属性）。
切换器在过滤器上采用 v-model（双向绑定）。
Remove all 作为回调属性传递。
（编辑）
App.vue
<template>
<div>
<h1>TODO</h1>
<input type="text" v-model="inputTask" placeholder="Enter your task">
<button @click="addTask">Add task</button>
<Switchers
v-model='filter'
:onRemoveAll="removeAllItem"
/>
<ListTodo :todos='filtered' :noTask='noTask' :onRemoveTask='removeTask' :onToggleStatus='toggleStatus' />
</div>
</template>
<script>
import Switchers from "./components/Switchers";
import ListTodo from "./components/ListTodo";
export default {
keyName: 'myTodoList',
components: {
Switchers,
ListTodo,
},
created() {
let keyObject =JSON.parse(localStorage.getItem(this.keyName))
if (keyObject) {
this.todos = keyObject;
}
},
data() {
return {
inputTask: '',
// filtered:'',
filter: 'all',
todos: [],
};
},
computed: {
filtered() {
this.filter; this.todos;
return this.filteredTodos()
},
id() { return this.todos.length+1 },
noTask() {
return {
'all': 'No tasks',
'ongoing': 'No ongoing tasks',
'done': 'No done tasks',
}[this.filter]
},
},
methods: {
addTask() {
if (this.inputTask==='') {
return
}
this.addTaskChild(this.inputTask);
this.inputTask=''
},
addTaskChild(inputValue) {
const todo = {id: this.id, task:inputValue, done:false}
this.todos.push(todo)
localStorage.setItem(this.keyName, JSON.stringify(this.todos));
this.filter = 'all'
},
removeAllItem() {
this.todos = []
localStorage.clear();
this.filter = 'all'
},
filteredTodos() {
return this.todos.filter(todo => {
if (this.filter === 'ongoing') {
return !todo.done;
} else if (this.filter === 'done') {
return todo.done;
} else {
return true;
}
});
},
toggleStatus(todo) {
todo.done = !todo.done
localStorage.setItem(this.keyName, JSON.stringify(this.todos));
},
removeTask(t) {
this.todos = this.todos.filter(todo => todo.id !== t.id)
},
}
};
</script>
ListTodo.vue
<template>
<div>
<p>{{todos.length}} tasks left / {{todos.length}} tasks of all</p>
<ul>
<li v-for="todo in todos" :class="{done:todo.done}" :key="todo.id">
<input type="checkbox" :checked="todo.done" @click="status(todo)">
{{ todo.task }}
<button @click="onRemoveTask(todo)">Remove task</button>
</li>
</ul>
<p v-show="todos.length===0">{{noTask}}</p>
</div>
</template>
<script>
export default {
props: {
todos: {
type: Array,
required: true
},
onRemoveTask: {
type: Function,
required: true
},
onToggleStatus: {
type: Function,
required: true
},
noTask: {
type: String,
required: true
}
},
data() {
return {
id: 1,
done:false,
};
},
methods: {
status(todo) {
this.onToggleStatus(todo)
},
},
};
</script>
Switchers.vue
<template>
<div>
<button :class="{active: filter ==='all'}" @click="set_filter('all')">All</button>
<button :class="{active: filter ==='ongoing'}" @click="set_filter('ongoing')">Ongoing</button>
<button :class="{active: filter ==='done'}" @click="set_filter('done')">Done</button>
<button @click="onRemoveAll">Remove all</button>
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
required: true
},
onRemoveAll: {
type: Function,
required: true
}
},
watch: {
value: {
handler(v) {
if (this.filter !== v)
this.filter = v
},
immediate: true
}
},
data() {
return {
filter:'',
};
},
methods: {
set_filter(f) {
this.filter = f
this.$emit('input', f)
},
},
};
</script>
<style lang="scss" scoped>
.active {background: turquoise;}
</style>
惯用的 vuejs 更喜欢响应式属性而不是命令式风格。在这种情况下，我们宁愿保留一份待办事项列表 + 过滤条件（在 App 中），并公开下一个 id、过滤列表和 noTask 消息的计算属性。
Switchers 是一个纯控制器组件：它没有状态，唯一的作用是将用户选择转换为调用 App 模型。
ListTodo 是一个视图，只负责显示作为道具提供的待办事项列表。它不关心列表是否被过滤。
也可以进行一些小的样式更改，但它们与 vuejs/emit 没有任何关系，所以我没有这样做。
Sandbox