Attempting to improve my JavaScript OOP skills, I am also delving into learning vue.js. My current project involves creating a simple task list for practice purposes. While most of it is complete, I have hit a roadblock with the remove task function. Initially, I used the .remove() method but encountered issues with updating my v-if and v-else statements on the frontend, despite having another function in place to check the array length. As a result, I switched to trying to splice the array, but I'm facing difficulties as it keeps returning undefined. Since each element in the array is an object, I suspect that my issue lies in the way I am attempting to access the value, but I am unsure of the correct approach.
The HTML section:
<div class="form-group">
<input type="text" id='task-entry' class='px-2' @keyup.enter="addTask">
<a href="#" class='btn btn-info' id='task-button' @click="addTask">Add Task</a>
</div> <!-- form-group -->
<hr class='hr my-5 bg-dark'>
<div class="task-list py-3 bg-white mx-auto w-75">
<ul v-if='taskList.length > 0' class='mb-0 px-2'>
<li v-for="tasks in taskList" class='text-dark p-3 task-item text-left clearfix'>
<div class='task-name float-left'>
<span>{{ tasks.task }}</span>
</div>
<a href="#" class="btn btn-danger remove-task float-right" @click='removeTask'>Remove Task</a>
</li>
</ul>
<div v-else>
You currently have no tasks.
</div>
JavaScript code snippet:
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;
}
}
}
});