vue在js上处理后台返回的数组_javascript-对象值在vue.js中的数组中返回“未...

我试图在JavaScript OOP方面做得更好,并且我也在学习vue.js.我正在建立一个简单的任务列表来教自己,除删除任务功能外,我已完成了大部分任务.我最初只是使用.remove()选项,但是即使在另一个函数检查数组长度的情况下,它也没有更新前端的v-if和v-else语句.因此,我决定尝试拼接数组,但是由于它返回的是未定义的内容,我有点迷失了.由于数组中的每个元素都是一个对象,所以我确定这是我尝试调用该值的方式,但是我不太确定该怎么做.

这是HTML：

Add Task

---

• {{ tasks.task }}

  Remove Task

You currently have no tasks.

这是JavaScript：

new Vue({

el: '#app',

data: {

title: 'To Do List',

taskList: [],

showError: false

},

methods: {

addTask: function () {

var task = document.getElementById('task-entry');

if (task.value !== '' && task.value !== ' ') {

this.error(1);

this.taskList.push({

task: task.value

});

task.value = '';

} else {

this.error(0);

}

},

removeTask: function (e) {

if(e.target.classList.contains('remove-task')) {

var targetElement = e.target.parentElement;

var test = targetElement.querySelector('span').innerText;

console.log(test);

console.log(this.taskList[{task: test}]);

} else {

e.preventDefault;

}

},

error: function (value) {

if (value === 0) {

this.showError = true;

} else {

this.showError = false;

}

}

}

});