Currently, I am busy diving deep into Vuejs and encountering a couple of challenges.
The first issue I am facing is while creating a basic todo app with CRUD functionality. When passing data through an input field, it refuses to adhere to full-width settings when CSS rules are applied.
Secondly, I have implemented a delete button that should appear when the checkbox for completing a task is checked. However, despite following Vuejs documentation and doing extensive research online, the button fails to remove the item from my list as intended.
I would greatly appreciate any assistance or guidance on resolving these issues.
<template>
<v-card class="wrapper mx-auto">
<v-list-item>
<v-list-item-content>
<v-list-item-title c class="title">Your Todo's</v-list-item-title>
</v-list-item-content>
<v-spacer></v-spacer>
<v-text-field
prepend-inner-icon="mdi-magnify"
label="Search"
single-line
clearable
clear-icon="mdi-close-circle-outline"
></v-text-field>
</v-list-item>
<v-divider></v-divider>
<v-container id="todoApp">
<v-form name="todo-form" method="post" action v-on:submit.prevent="addTask">
<v-text-field
v-model="addTodoInput"
v-bind:class="{error: hasError}"
label="What are you working on?"
solo
@keydown.enter="create"
>
<v-fade-transition v-slot:append></v-fade-transition>
</v-text-field>
</v-form>
<v-divider class="mb-4"></v-divider>
<v-card class="todo-lists" v-if="lists.length">
<v-list-item v-for="list in lists" :key="list.id">
<v-checkbox v-model="list.isComplete" :color="list.isComplete ? 'success' : 'primary'"></v-checkbox>
<v-list-item-action>
<input class="input-width" type="text" v-model="list.text" />
</v-list-item-action>
<v-spacer></v-spacer>
<v-scroll-x-transition>
<div v-if="list.isComplete">
<v-btn class="ma-2" v-on:click="removeTask(id)" tile large color="error" icon>
<v-icon>mdi-trash-can-outline</v-icon>
</v-btn>
</div>
</v-scroll-x-transition>
</v-list-item>
</v-card>
</v-container>
</v-card>
</template>
<script>
export default {
data: () => ({
addTodoInput: null,
lists: [
{ id: 1, isComplete: true, text: "go home" },
{ id: 2, isComplete: true, text: "go home" }
],
hasError: false // <-- Used to handle errors
}),
methods: {
addTask: function() {
if (!this.addTodoInput) {
this.hasError = true;
return;
}
this.hasError = false;
this.lists.push({
id: this.lists.length + 1,
text: this.addTodoInput,
isComplete: false
});
this.addTodoInput = "";
},
updateTask: function(e, list) {
e.preventDefault();
list.title = e.target.innerText;
e.target.blur();
},
create() {
console.log("Create");
},
removeTodo: function(lists) {
this.todos.splice(list, 1);
}
}
};
</script>
<style scoped>
.wrapper {
height: 100%;
}
input.input-width {
width: 100%;
}
</style>