Home>

(Example) Todo management is made with Vue.js.
I want to delete a multi-dimensional array object using v-on: click, but it doesn't work.
The following error message occurred while implementing the delete function.

Error message
// Display in google developer tool (console)
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'splice' of undefined"
Applicable source code
<template>
  
     Task List 
      
        <input type = "text" placeholder = "Title" v-model = "newTaskTtitle">
        <input type = "text" placeholder = "Content Register with Shift + Enter" v-model = "newTaskComment" v-on: keyup.shift.enter = "addTodo">
      
    <Draggable: options = "{group: 'tasks'}" element = "ul" v-for = "(list, index) in tasks" v-bind: class = "['task__' + index]">
      <li v-for = "item in list": key = "item.status">
         {{item.name}} 
        
           {{item.comment}} 
        
        
          <input type = "text" v-model = "item.comment" v-on: blur = "isComment = false">
        
</// ↓ I want to delete only the pressed task
           <span v-on: click = "doDelete (item) in list">Delete</span>
        </li>
    </draggable>
  
</template>
<script>
import draggable from 'vuedraggable';
export default {
  name: 'App',
  components: {
    draggable,
  },
  data () {
    return {
      tasks: [
      [{name: 'Incomplete', status: 1, comment: "Part 1"}, {name: 'Incomplete', status: 1, comment: "Part 2"}],
      [{name: 'work in progress', status: 2, comment: "part 1"}, {name: 'work in progress', status: 2, comment: "part 2"}],
      [{name: 'completed', status: 3, comment: "part 1"}, {name: 'completed', status: 3, comment: "part 2"}],
      ],
      isComment: false,
      newTaskTtitle: '',
      newTaskComment: ''
    }
  },
  methods: {
    // Add task
    addTodo: function () {
      this.tasks [0] .push ({name: this.newTaskTtitle, comment: this.newTaskComment});
      this.newTaskTtitle = "",
      this.newTaskComment = ""
    },
// Delete task (does not work well using splice)
    doDelete: function (item) {
      this.item.splice (this.item.indexOf (item), 1);
    }
  }
}
</script>

Console.log (item) shows {ob: Observer} and the object is taken

Supplemental information (FW/tool version etc.)

Vue cli
draggable (library)

  • Answer # 1

    How about passing the index as an argument instead of an object?