I'm currently working on integrating an edit feature into a task application using Vue JS.
- My issue lies in the fact that I have a click event assigned to the edit button -
@click="editShow"which displays input fields for editing all items instead of just the corresponding one. - Furthermore, I'm struggling with saving the edited value to the description of each item. The keyup event -
@keyup.enter="editTask"seems to refer to the keyup event itself rather than the object, causing the problem.
You can view my current progress here: https://jsfiddle.net/clintongreen/0p6bvd4j/
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" >
<strong v-if="!editActive">{{ task.description }}</strong>
<input v-model="editTaskName" v-bind:placeholder="task.description" v-if="editActive" @keyup.enter="editTask" type="text" class="form-control input-height pull-left">
<div class="btn-group btn-group-sm pull-right" role="group" v-if="!task.completed">
<button type="button" class="btn btn-default" @click="completeTask(task)">Complete</button>
<button type="button" @click="editShow" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default" @click="removeTask(task)">Remove</button>
</div>
<button class="btn btn-default btn-sm completed text-muted pull-right disabled btn-width" v-else>Completed</button>
</li>
<li class="list-group-item clearfix">
<input v-model="newTaskName" @keyup.enter="newTask" type="text" class="form-control input-height pull-left">
<button class="btn btn-success btn-sm pull-right btn-width" @click="newTask">Add Task</button>
</li>
</ul>
</div>
</div>
JS
new Vue({
el: '#tasks',
data: {
message: 'Tasks',
completed: null,
newTaskName: '',
editTaskName: '',
editActive: false,
tasklist: [
{ description: 'Read', completed: true },
{ description: 'Write', completed: true },
{ description: 'Edit', completed: false },
{ description: 'Publish', completed: false }
]
},
methods: {
completeTask: function(task){
task.completed = true;
},
newTask: function(){
this.tasklist.push({description: this.newTaskName, completed: false});
},
removeTask: function(task){
this.tasklist.splice(this.tasklist.indexOf(task), 1);
console.log(task);
},
editShow: function(task){
this.editActive = true // should only show the corresponding edit input
console.log(task);
},
editTask: function(task){
console.log(task);
}
}
})