delete method vue의 모든 값 삭제

delete method vue의 모든 값 삭제

내가 원하는 것은 클릭된 항목만 삭제하는 것이다.

ToDoList 컴포넌트:

템플릿:

<ul class="list-group">
                  <todo v-for="(todo,i) in todo" :key="i" :todoString="todo.todoString" :completed="todo.completed"
                  @on-delete="del(todo)" />
              </ul>

스크립트:

 data() {
    return {
      todo: [
        { todoString: "make videos Angular", completed: true },
        { todoString: "make videos React", completed: false },
        { todoString: "make videos Vue", completed: true },
        { todoString: "make videos Javascript", completed: false },
      ],
    };
  },
 
 del(deltodo) {
          this.todo = this.todo.filter(todos => {
            todos.todoString !== deltodo.todoString;
           console.log(this.todo.length)
          });
          console.log(this.todo.length)
        },

ToDo Component:

템플릿:

<li class="d-flex align-items-center list-group-item">
    <button class="btn border-0 text-left flex-grow-1">{{todoString}}</button>
    <form action="" class="flex-grow-1">
        <input type="text" class="form-control">
    </form>

    <button class="btn btn-outline-primary">Edit</button>
    <button  key="" @click="$emit('on-delete')" class="btn btn-outline-danger">delete</button>

</li>

스크립트:

props:{
    todoString:String,
    completed:Boolean
},

문제는 내가 하나의 아이템을 삭제하면 모든 아이템이 삭제된다는 것입니다.

인덱스를 다음에 건네주는 것으로 시작합니다.del오브젝트 전체가 아니라

@on-delete="del(i)"

그 다음에del를 사용하여 구현될 수 있습니다.splice:

del(i) {
  // remove 1 element at index i
  this.todo.splice(i, 1);
}

사용하고 싶은 경우filter콜백에서 돌아와야 합니다.

this.todo = this.todo.filter(todos => {
  return todos.todoString !== deltodo.todoString
});

v-for에서는 단일 요소의 이름을 어레이와 동일하게 지정했는데, 이것이 문제일 수 있습니다.이것을 시험해 보세요.

<ul class="list-group">
                  <todo v-for="(t,i) in todo" :key="i" :todoString="t.todoString" :completed="t.completed"
                  @on-delete="del(t)" />
              </ul>

필터 기능에도 문제가 있어 아무것도 반환하지 않습니다.이 조작은 유효합니다.

 del(deltodo) {
          this.todo = this.todo.filter(todos => {
            console.log(this.todo.length);
            return todos.todoString !== deltodo.todoString;
          });
          console.log(this.todo.length)
        },

언급URL : https://stackoverflow.com/questions/64982383/delete-method-delete-all-the-values-in-vue