In Vue.js, How this fix, after splicing an array, following its class-CodePudding

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

https://github.com/seongjin2427/Public

* checked the check box

*after pushing x-box to get rid of checked todo

CodePudding user response：

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 >
      <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" :>{{ todo.text }}</span>
          <input :id="'invsb' (idx 1)" @mouseout="change2"  type="text" v-model="todo.text">
          <input :id="'xbox' (idx 1)"  @click="deleteTask(todo.id)" type="button" value="x">
        </li>
      </ul>
    </div>
  </div>
</body>

CodePudding user response：

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)
}