Why data returning from Laravel 9 api endpoint not showing in Vue UI? - vue.js

Question

I'm developing simple TodoList app using Laravle 9, VueJS 3, Vite bundler - all this built in tools
when creating Laravel fresh installation.
In app user can make CRUD operations with TodoItem and all user data saved on server, so
data preserved on page refresh.
Application almost finished, unless some strange bug: when I run app on local machine - all works perfectly, but when I deploy it on Heroku and open in browser - I see no todos in UI, although during installation some example todo rows already seeded in db.
I examined API - it returns data as expected:
[
{
"id": 67,
"text": "Thing1",
"is_done": false,
"is_urgent": false,
"created_at": "2022-08-24T09:16:37.000000Z",
"updated_at": "2022-08-24T09:16:37.000000Z"
},
{
"id": 68,
"text": "Buy milk",
"is_done": false,
"is_urgent": false,
"created_at": "2022-08-24T09:16:37.000000Z",
"updated_at": "2022-08-24T09:16:37.000000Z"
},
{
"id": 69,
"text": "Thing2",
"is_done": true,
"is_urgent": false,
"created_at": "2022-08-24T09:16:37.000000Z",
"updated_at": "2022-08-24T09:16:37.000000Z"
},
{
"id": 70,
"text": "Thing3",
"is_done": true,
"is_urgent": false,
"created_at": "2022-08-24T09:16:37.000000Z",
"updated_at": "2022-08-24T09:16:37.000000Z"
}
]
When I create new Todo in textbox request sends to server, and data saved on remote server - but on page refresh - I again get empty data in UI, althout i see in that data loaded
This is my App.vue
<template>
<div class="container mt-5" style="padding-left: 0 !important;">
<h3><span class="fw-bold text-warning">Simple</span> TodoList</h3>
</div>
<div class="container mt-4">
<div class="row">
<!-- Simple todos -->
<div class="col-md-6 py-3" style="border: 1px solid #ddd">
<p>Todos ({{ simpleTodos.length }})</p>
<ul>
<li :id="todo.id"
:key="todo.id"
:class="{ 'text-decoration-line-through': todo['is_done'], 'todo-item__link': true }"
v-for="todo in simpleTodos"
#click="contentVisible === todo.id ? contentVisible = false : contentVisible = todo.id">
{{ todo.text }}
</li>
</ul>
<input type="text" name="todo" id="todo.new" #keydown.enter="addTodo" placeholder="Type todo and press Enter" />
</div>
<!-- Urgent todos -->
<div class="col-md-6 py-3" style="border: 1px solid #ddd">
<p>Todos <span :class="{ 'text-danger': urgentTodos.length >= 3}">({{ urgentTodos.length }})</span></p>
<ul>
<li :id="todo.id"
:key="todo.id"
:class="{ 'text-decoration-line-through': todo['is_done'], 'todo-item__link': true }"
v-for="todo in urgentTodos"
#click="contentVisible === todo.id ? contentVisible = false : contentVisible = todo.id">
{{ todo.text }}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import {getAllTodos, createTodo, removeTodo, toggleTodoCompleteStatus, toggleTodoUrgentStatus} from '../services/TodoService'
export default {
name: "App",
data() {
return {
allTodos: [],
contentVisible: false
}
},
mounted() {
this.getAllTodos();
},
computed: {
simpleTodos() {
return this.allTodos.filter(todo => todo['is_urgent'] === 0);
},
urgentTodos() {
return this.allTodos.filter(todo => todo['is_urgent'] === 1);
}
},
methods: {
getAllTodos()
{
getAllTodos()
.then(todos => {
console.log(todos)
this.allTodos = todos
})
.catch(err => {
alert('Error happened while fetching todos!');
console.error(err)
});
},
addTodo(e)
{
// return if value is empty
if(e.target.value.trim().length === 0)
return false;
const clientTodo = { text: e.target.value, is_done: 0, is_urgent: 0 }
createTodo(clientTodo).then(({ todo }) => {
this.allTodos.push(todo);
e.target.value = "";
});
},
}
}
</script>
<style scoped>
.todo-item__link {
cursor: pointer;
position: relative;
}
.todo-item__link .text-primary {
position: absolute;
padding-left: 10px;
}
.todo-item__link:hover {
text-decoration: underline;
}
</style>
I tring to use Vue Debug Tools - it shows empty allTodos list.
I don't unsderstand why this.getAllTodos() doesn't update state on mount

Answer 1

The problem is the is_done and is_urgent properties are Booleans in your API resonse, but your component is incorrectly comparing them to 0 and 1:
export default {
computed: {
simpleTodos() {
//return this.allTodos.filter(todo => todo['is_urgent'] === 0); ❌ Boolean is never a number
return this.allTodos.filter(todo => todo['is_urgent'] === false); ✅
// or
return this.allTodos.filter(todo => !todo.is_urgent); ✅
},
urgentTodos() {
//return this.allTodos.filter(todo => todo['is_urgent'] === 1); ❌ Boolean is never a number
return this.allTodos.filter(todo => todo['is_urgent'] === true); ✅
// or
return this.allTodos.filter(todo => todo.is_urgent); ✅
}
},
methods: {
addTodo(e) {
// const clientTodo = { text: e.target.value, is_done: 0, is_urgent: 0 } ❌ is_done and is_urgent should be Boolean
const clientTodo = { text: e.target.value, is_done: false, is_urgent: false } ✅
}
}
}
demo