1

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>
3
  • 1
    Can you update your question with your routes file please? Aug 21, 2021 at 20:44
  • do dd($todo->todolist) and check why it is returning null instead of the model. maybe related to your data in your DB. Also, post code not images. makes it har to copy/paste.
    – N69S
    Aug 21, 2021 at 20:47
  • Updated. However the DB seems ok, all the relations I need are where they need to be.
    – D.D.
    Aug 21, 2021 at 21:36

1 Answer 1

0

You don't have a route parameter for this route. Your method signature Todo $todo is going to cause Dependency Injection to happen, not Route Model Binding; so $todo is an injected new non existing Todo model instance.

If you want that to be Route Model Binding you would need to have a route parameter named todo. I would setup the route differently and make it more of a nested resource idea:

Route::get('todolists/{list}/todos', ...);

public function index(Todolist $list)
{
    return $list->todos;
}

Assuming the relationship on Todolist is named todos to get all its todo items.

2
  • Sure, why didn't I think about that? Obviously I need a parameter in the route referring the todolist, thanks!!!
    – D.D.
    Aug 22, 2021 at 6:11
  • Unfortunately it didn't solve the problem. I change the route, then in Vue i call the function in the created, but I can't pass in the todolist.id
    – D.D.
    Aug 22, 2021 at 8:58

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.