First of all, I'm sorry to write in English not well.
I'm looking foward to find the answer to fix this problems.
I'm making a todolist, it had a problem that the class ('centerLine') keeps following next element after deleting an array to use splice.
Please someone know, let me know how to fix it.
Thank you
You can send id to method
@click="deleteTask(todo.id)"
and then filter array
deleteTask(id) {
this.todos = this.todos.filter(t => t.id !== id)
}
let app = new Vue({
el: '#app',
data: {
todos: [{
id: 1,
text: '밥 먹기',
checked: false
},
{
id: 2,
text: '잘 자기',
checked: false
},
{
id: 3,
text: '유튜브 보기',
checked: false
}
],
input_text: ""
},
methods: {
addTodo() {
// 배열 길이 변수 저장
let arrayLength = this.todos[this.todos.length-1].id;
// Add 버튼 눌렀을 때, input_text값 그대로 배열에 push 하기
if (this.input_text != "") {
this.todos.push({
id: arrayLength + 1,
text: this.input_text
});
}
// push후 input 값 초기화
this.input_text = "";
},
change1(e) {
// 할 일 클릭 후 input 창으로 변경
let index = e.target.id.substr(3, 3);
document.querySelector('#vsb' + index).classList.toggle('none');
document.querySelector('#invsb' + index).classList.toggle('none');
},
change2(e) {
// input 창에서 마우스가 out되면 실행할 것
let index = e.target.id.substr(5, 3);
document.querySelector('#vsb' + index).classList.toggle('none');
document.querySelector('#invsb' + index).classList.toggle('none');
},
deleteTask(id) {
this.todos = this.todos.filter(t => t.id !== id)
}
}
});#app li {
list-style: none;
padding:0;
margin: 0;
}
span.centerLine {
text-decoration: line-through;
color: gray;
}
.x-box {
border-radius: 30%;
opacity: 0%;
}
.x-box:hover {
opacity: 100%;
transition: all 1s;
}
.none {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<body>
<div id="app">
<h1>To Do List</h1>
<hr>
<input type="text" v-model="input_text" @keyup.enter="addTodo">
<input type="button" value="Add" @click="addTodo">
<br>
<div class="todo-box">
<ul>
<li v-for="(todo, idx) in todos" :key="idx">
<input :id="'chk'+(idx+1)" type="checkbox" v-model="todo.checked">
<span :id="'vsb'+(idx+1)" @click="change1" :class="{'centerLine': todo.checked}">{{ todo.text }}</span>
<input :id="'invsb'+(idx+1)" @mouseout="change2" class="none" type="text" v-model="todo.text">
<input :id="'xbox'+(idx+1)" class="x-box" @click="deleteTask(todo.id)" type="button" value="x">
</li>
</ul>
</div>
</div>
</body>you can send the task in the method
@click="deleteTask(task)"
then splice it from array
deleteTask(task) {
this.todos.splice(this.todos.indexOf(task),1)
}