Question

我有一个家庭作业，有一个我遇到的问题。

我需要创建一个名为changeView的方法，该方法将过滤器应用于数组。按钮和过滤器已经编写，但是我需要对应用它们的方法进行编码，并使用新视图更新数组。代码中共有3个单独的按钮：全部，活动和完成。

我尝试在方法中调用switch语句，但是我认为我既没有写语法，也没有使用正确的变量。

数组名称为todos

按钮上的代码：

<div class="filters">
                <button :class="{selected: view === 'all'}" @click="changeView('all')">All</button>
                <button :class="{selected: view === 'active'}" @click="changeView('active')">Active</button>
                <button @click="changeView('completed')" :class="{selected: view === 'completed'}">Completed</button>
            </div>

来自过滤器的代码：

computed: {
            itemsLeft() {
                return this.todos.filter(t => !t.isDone).length;
            },
            activeTodos() {
                return this.todos.filter(t => !t.isDone);
            },
            completedTodos() {
                return this.todos.filter(t => t.isDone);
            },
            filteredTodos() {
                switch (this.view) {
                    case 'active':
                        return this.activeTodos;
                    case 'completed':
                        return this.completedTodos;
                    default:
                        return this.todos;

如果需要更多代码段，或者任何人都需要所有代码行，则可以将其粘贴。我尝试发出为简单起见不需要的内容。

Answer 1

您的代码似乎已对我完成。没有所有代码，很难看是否有任何问题。我已经使用您自己的代码here

进行了示例

new Vue({
	el: "#databinding",
	data: function() {
		return {
			status: 'all',
			todos: [
				{
					id: 1,
					isDone: false
				},
				{
					id: 2,
					isDone: true
				},
				{
					id: 3,
					isDone: true
				},
				{
					id: 4,
					isDone: false
				},
				{
					id: 5,
					isDone: false
				}
			],
		};
	},
	methods: {
		changeView: function (newStatus) {
			this.status = newStatus
		}
	},
	computed:{
		activeTodos: function() {
			return this.todos.filter(t => !t.isDone);
		},
		completedTodos: function () {
			return this.todos.filter(t => t.isDone);
		},
		filteredTodos() {
			switch (this.status) {
				case 'active':
					return this.activeTodos;
				case 'completed':
					return this.completedTodos;
				default:
					return this.todos;
			}
		}
	}
});

body {
	margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="databinding">
	<p>{{status}} Todos</p>
	<ul id="todos">
		<li v-for="todo in filteredTodos" :key="todo.id">
			{{todo.id}} - {{todo.isDone}}
		</li>
	</ul>
	<div class="filters">
		<button @click="changeView('all')">All</button>
		<button @click="changeView('active')">Active</button>
		<button @click="changeView('completed')">Completed</button>
	</div>
</div>

创建一种在任务列表中应用过滤器的方法

1 个答案: