As I transition from Vue's Options API to the Composition API, I decided to create a small Todo App for practice.
Within App.vue, my code looks like this:
<template>
<div id="app">
<ErrorMessage
v-if="!isValid"
message="The todo body must be at least 3 characters long"
/>
<SuccessMessage v-if="allDone" message="You can relax now! :)" />
<p>{{ allDone }}</p>
<div class="card">
<Header />
<List
:todos="todos"
@delete-todo="deleteTodo"
@toggle-todo="toggleTodo"
/>
<AddTodo @add-todo="addTodo" />
</div>
</div>
</template>
<script>
import { ref, computed } from 'vue';
import ErrorMessage from './components/ErrorMessage.vue';
import SuccessMessage from './components/SuccessMessage.vue';
import Header from './components/Header.vue';
import List from './components/List.vue';
import AddTodo from './components/Add.vue';
export default {
name: 'App',
components: {
ErrorMessage,
SuccessMessage,
Header,
List,
AddTodo,
},
setup() {
const todos = ref([]);
const isValid = ref(true);
const allDone = ref(false);
return { todos, isValid, allDone };
},
methods: {
toggleTodo: function (index) {
this.todos[index].done = !this.todos[index].done;
},
deleteTodo: function (index) {
if (confirm('Are you sure?')) {
this.todos.splice(index, 1);
}
},
addTodo: function (text) {
let newTodo = {
done: false,
text: text,
};
if (text.length > 2) {
this.isValid = true;
this.todos.push(newTodo);
} else {
this.isValid = false;
}
},
},
computed: {
allDone: function () {
// Check if there are todos and
// If all of them are done
let undoneTodos = this.todos.filter((todo) => todo.done === false);
return this.todos.length && !undoneTodos.length;
},
},
};
</script>
In my code, I utilize the computed property allDone to determine if all todos are completed. When conditions are met, a success message ("You can relax now!") should display in an alert component.
Despite this logic, the initial value of the allDone variable remains unchanged even when conditions warrant it to change. What could be causing this issue?