Question

使用Vue.js时，我有一个删除所有任务的函数，但我不知道如何从数组中删除该项。

我尝试在removeAllArchived方法中调用remove函数，但它无法正常执行。

也只是调用这个。$ remove（任务）不起作用。

new Vue({
	el: '#todo',

	data: {
		tasks: [
			{ 'task': 'Eat breakfast', 'completed': false, 'archived': false },
			{ 'task': 'Play with Klea', 'completed': false, 'archived': false },
			{ 'task': 'Code some stuff', 'completed': false, 'archived': false }
		],

		newTask: ''
	},

	methods: {
		toggleTaskCompletion: function(task) {
			task.completed = ! task.completed;
		},

		addTask: function(e) {
			e.preventDefault();

			this.tasks.push({
				'task': this.newTask,
				'completed': false,
				'archived': false
			});

			this.newTask = '';
		},

		editTask: function(task) {
			this.tasks.$remove(task);

			this.newTask = task.task;

			// focus on input field
			this.$$.newTask.focus();
		},

		archiveTask: function(task) {
			task.archived = true;
		},

		removeTask: function(task) {
			this.tasks.$remove(task);
		},

		completeAll: function() {
			this.tasks.forEach(function(task) {
				task.completed = true;
			});
		},

		removeAllArchived: function() {
			this.tasks.forEach(function(task) {
				if(task.archived == true) {
					console.log(task.task);
					delete(task);
				}
			});
		}
	},

	filters: {
		inProcess: function(tasks) {
			return tasks.filter(function(task) {
				return ! task.completed && ! task.archived;
			});
		},

		inDone: function(tasks) {
			return tasks.filter(function(task) {
				return task.completed && ! task.archived;
			});
		},

		inArchive: function(tasks) {
			return tasks.filter(function(task) {
				return task.archived;
			});
		}
	},

	computed: {
		completions: function() {
			return this.tasks.filter(function(task) {
				return ! task.completed && ! task.archived;
			});
		},

		done: function() {
			return this.tasks.filter(function(task) {
				return task.completed && ! task.archived;
			});
		},

		archived: function() {
			return this.tasks.filter(function(task) {
				return task.archived;
			});
		}
	}

});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.5/vue.min.js"></script>

	<div id="todo">

		<h1>Vue Todo</h1>


		<div class="row">
			<div class="col-xs-12">
				<form v-on="submit: addTask">
					<div class="form-group">
						<label for="name">Add Todo:</label>
						<input type="text" name="name" id="name" class="form-control" v-model="newTask" v-el="newTask">
					</div>

					<div class="form-group">
						<button type="submit" class="btn btn-primary">Add Task</button>
					</div>				
				</form>
			</div>
		</div>
		

		<div class="row">
			<div class="col-xs-12 col-sm-6 col-md-4">
				<h2>Todo <small v-if="completions.length">({{ completions.length }})</small></h2>
				<table class="table">
					<thead>
						<tr>
							<th>Task</th>
							<th>Options</th>
						</tr>
					</thead>
					<tbody>
						<tr v-repeat="task: tasks | inProcess">
							<td>{{ task.task }}</td>
							<td>
								<buttn class="btn btn-xs btn-success" v-on="click: toggleTaskCompletion(task)">Complete</buttn>
								<buttn class="btn btn-xs btn-primary" v-on="click: editTask(task)">Edit</buttn>
								<buttn class="btn btn-xs btn-danger" v-on="click: archiveTask(task)">Archive</buttn>
							</td>
						</tr>
					</tbody>
				</table>			
			</div>
			<div class="col-xs-12 col-sm-6 col-md-4">
				<table class="table">
					<h2>Done <small v-if="done.length">({{ done.length }})</small></h2>
					<thead>
						<tr>
							<th>Task</th>
							<th>Options</th>
						</tr>
					</thead>
					<tbody>
						<tr v-repeat="task: tasks | inDone">
							<td>{{ task.task }}</td>
							<td>
								<buttn class="btn btn-xs btn-success" v-on="click: toggleTaskCompletion(task)">Uncomplete</buttn>
								<buttn class="btn btn-xs btn-danger" v-on="click: archiveTask(task)">Archive</buttn>
							</td>
						</tr>
					</tbody>
				</table>			
			</div>
			<div class="col-xs-12 col-sm-6 col-md-4">
				<h2>Archived <small v-if="archived.length">({{ archived.length }})</small></h2>
				<table class="table">
					<thead>
						<tr>
							<th>Task</th>
							<th>Options</th>
						</tr>
					</thead>
					<tbody>
						<tr v-repeat="task: tasks | inArchive">
							<td>{{ task.task }}</td>
							<td>
								<buttn class="btn btn-xs btn-danger" v-on="click: removeTask(task)">Remove</buttn>
							</td>
						</tr>
					</tbody>
				</table>			
			</div>
		</div>

		<div class="row">
			<div class="col-xs-12">
				<button class="btn btn-warning" v-on="click: completeAll">Complete All</button>
				<button class="btn btn-danger" v-on="click: removeAllArchived">Remove All Archived</button>
			</div>
		</div>
		<pre>{{ $data | json }}</pre>
	</div>

removeAllArchived: function() {
    this.tasks.forEach(function(task) {
        if(task.archived == true) {
            console.log(task.task);
            // remove task
        }
    });
}

如何使按钮“删除所有已存档”工作？

Answer 1

我认为你需要直接从数组中删除属性，你不会从参数中删除任何引用。

removeAllArchived: function() {
    this.tasks.forEach(function(task, index) {
        if(task.archived == true) {
            console.log(task.task);
            delete(this.tasks[index]);
        }
    });
}

如果过滤掉数组，可能会更好：

removeAllArchived: function() {
    this.tasks = this.tasks.filter(function(task){
         return task.archived !== true;
    });
}

编辑：清除了非存档。现在它删除了存档。

Answer 2

您可以使用切片，或者我喜欢并使用此剪辑：http://ejohn.org/blog/javascript-array-remove/

// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

Javascript：从数组中移除项

2 个答案: