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.
// 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
Related articles
- i want to save the object of the scene in unity2d, delete it once, and then display the object saved by the button event
- javascript - delete class with vuejs
- java - i want to get a multi-dimensional array of string type with extended for!
- swift5 i want to delete a specified element in an array that contains instances of the class
- extracting values from php multi-dimensional array
- i want to use array_diff with php multidimensional associative array
- python - how to add a one-dimensional array into a multi-dimensional array
- vuejs - [object promise] is displayed
- i want to extract specific data in a multi-dimensional array with gas to make multiple one-dimensional arrays
- php - i want to check if a value in a multidimensional array has a specific value
- javascript - i want to make an associative array with a multidimensional array
- JS delete array specified value common method detailed explanation
- JS in-depth study of array object sorting operation example
- javascript - i want to search the contents of a multidimensional array
- javascript - i want to get the second of a multidimensional array
- typescript - vuejs array error cannot be resolved
- vuejs - i want to delete the file created with vue-cli
- java - processing does not end with multidimensional array
- i want to calculate the sum of the contents of an associative array with vuejs
- i want to reflect some changes in the vuejs array in real time
Related questions
- vuejs - vuex4 uncaught error: module build failed: error: enoent: no such file or directory, open
- vuejs - i want to delete the file created with vue-cli
- javascript - i want to read an environment variable using env in vuejs
- list list is duplicated when moving pages with vuejs (life cycle)
- javascript - processing with foreach does not work (vuejs)
- internet explorer - syntax error in ie11 when running vue-js production mode
- vuejs - as a result of shaping with prettier, it gets caught by eslint
- javascript - use vue's v-for to display in descending order of goodness, and display the same posts collectively (ranking functi
- nodejs - error with npm command
- javascript - i want to jump to the url specified by vue's props
How about passing the index as an argument instead of an object?