Javascript 从Vue中的阵列中删除项
我有以下任务列表应用程序。我正在尝试实现一个Javascript 从Vue中的阵列中删除项,javascript,arrays,vue.js,vuejs2,Javascript,Arrays,Vue.js,Vuejs2,我有以下任务列表应用程序。我正在尝试实现一个delete函数。我发现我需要使用splice从数组中删除该项,但如何仅针对我单击其按钮的项 JS new Vue({ el: '#tasks', data: { message: 'Tasks', completed: null, newTaskName: '', tasklist: [ { description: 'Read', comp
delete
函数。我发现我需要使用splice
从数组中删除该项
,但如何仅针对我单击其按钮的项
JS
new Vue({
el: '#tasks',
data: {
message: 'Tasks',
completed: null,
newTaskName: '',
tasklist: [
{ description: 'Read', completed: true },
{ description: 'Write', completed: true },
{ description: 'Edit', completed: false },
{ description: 'Publish', completed: false }
]
},
methods: {
completeTask: function(task){
// console.log(this.tasks.description);
task.completed = true;
},
newTask: function(){
this.tasklist.push({description: this.newTaskName, completed: false});
},
removeTask: function(task){
this.tasklist.splice(this.task.index, 1);
}
}
})
HTML
<div class="container" id="tasks">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
{{ message }}
</h3>
</div>
<ul class="list-group">
<li class="list-group-item clearfix" v-for="task in tasklist" >
{{ task.description }}
<!-- <button class="btn btn-primary btn-sm pull-right" v-if="!task.completed" @click="completeTask(task)">Complete</button> -->
<div class="btn-group btn-group-sm pull-right" role="group" v-if="!task.completed">
<button type="button" class="btn btn-primary" @click="completeTask(task)">Complete</button>
<button type="button" class="btn btn-info">Edit</button>
<button type="button" class="btn btn-danger" @click="removeTask(task)">Delete</button>
</div>
<button class="btn btn-default btn-sm completed text-muted pull-right disabled" v-else>Completed</button>
</li>
<li class="list-group-item clearfix">
<input v-model="newTaskName" @keyup.enter="newTask" type="text" class="pull-left">
<button class="btn btn-success btn-sm pull-right" @click="newTask">Add Task</button>
</li>
</ul>
</div>
</div>
{{message}}
-
{{task.description}}
完成
编辑
删除
完整的
-
添加任务
使用v-for
中的任务索引来决定要拼接的项目()
您的按钮:
<button type="button" class="btn btn-danger" @click="removeTask(index)">Delete</button>
对于Vue2,请使用
删除
v-for="(task, index) in tasklist"
<button type="button" class="btn btn-danger" @click="removeTask(index)">Delete</button>
removeTask: function(index) {
this.tasklist.splice(index, 1);
}
removeTask: function(index){
this.$delete(this.tasklist, index)
}