En primer lugar, lamento no escribir bien en inglés.
Espero encontrar la respuesta para solucionar estos problemas.
Estoy haciendo una lista de tareas, tenía el problema de que la clase ('centerLine') seguía el siguiente elemento después de eliminar una matriz para usar el empalme.
Por favor, alguien sabe, hágamelo saber cómo solucionarlo.
Gracias
https://github.com/seongjin2427/Público
* marcó la casilla de verificación
*después de presionar x-box para deshacerse de las tareas marcadas
Puedes enviar id al método
@click="deleteTask(todo.id)"y luego filtrar matriz
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>puedes enviar la tarea en el método
@click="deleteTask(task)"luego empalmarlo de la matriz
deleteTask(task) { this.todos.splice(this.todos.indexOf(task),1) }