The app should behave like this: Once the login is done I have all my todolists, so I have to get all the todos for that todolists, not only the todos from a specific todolist.
The only thing I want to happen is that the todos should appear only on the relative todolist.
AXIOS REQUEST
getTodos(todolist) {
axios
.get(`http://127.0.0.1:8000/api/todolists/${todolist}/todos`)
.then((res) => {
this.todos = res.data;
console.log(res.data);
})
.catch((err) => {
console.log(err);
});
},
Vue template
<div
v-if="todolists.length > 0 && !loading"
class="todolist-row h-100 py-5"
:class="todolists.length == 1 ? 'todolist-1' : ''"
>
<div class="todolist" v-for="todolist in todolists" :key="todolist.id">
<div class="td-title">
<h5 class="text-center m-0 py-2 text-light">
{{ todolist.title }}
</h5>
</div>
<div class="td-inputs d-flex align-items-center justify-content-center">
<input class="px-2" type="text" />
<button type="submit">
<i class="fas fa-plus fa-2x"></i>
</button>
</div>
<div class="px-2">
<div v-for="todo in todos" :key="todo.id">
{{ todo.title }}
</div>
<div><i class="fas fa-times" @click="cancel(todolist.id)"></i></div>
</div>
</div>
</div>
ROUTE
Route::get('todolists/{todolist}/todos', 'TodoController@index');
CONTROLLER
public function index(Todolist $todolist) {
return $todolist->todos;
}
I've tried this computed property (passing it then in the v-for) but it didn't work
computed: {
filtered() {
this.todolists.forEach( todolist => {
this.todos.filter( todo => todo.todolist_id == todolist.id)
return this.todos
})
}
},
-----------------------------MISTERY SOLVED--------------------------------
in the TodolistController I've just add "->with('todos')" and it returns me a todos array of objects inside the todolist array of objects.
So then with a v-for on "todolist.todos" I get just the todos I need.
I didn't even need an api for this.
TodolistController
$userTodolist = Todolist::where('user_id', Auth::id())->orderBy('id', 'DESC')->with('todos')->get();
VUE template
<div v-for="todo in todolist.todos" :key="todo.id">
{{ todo.title }}
</div>
dd($todo->todolist)
and check why it is returningnull
instead of the model. maybe related to your data in your DB. Also, post code not images. makes it har to copy/paste.