如何获取与 todolist 相关的 todos？（已解决）

Question

应用程序的行为应如下所示： 登录完成后，我拥有了所有的 todolist，因此我必须获取这些 todolist 的所有 todo，而不仅仅是来自特定 todolist 的 todo。

我唯一希望发生的事情是 todos 应该只出现在相对 todolist 上。

AXIOS 请求

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 模板

    <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::get('todolists/{todolist}/todos', 'TodoController@index');

控制器

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

我已经尝试过这个计算属性（然后在 v-for 中传递它）但它不起作用

computed: {
    filtered() {
      this.todolists.forEach( todolist => {
        this.todos.filter( todo => todo.todolist_id == todolist.id)
        return this.todos
      })
    }
  },

------------------问题解决了---------------- ----------------

在 TodolistController 中，我刚刚添加了“->with('todos')”，它在 todolist 对象数组中返回了一个 todos 对象数组。

然后在“todolist.todos”上使用 v-for，我得到了我需要的 todo。

我什至不需要 api。

TodolistController

$userTodolist = Todolist::where('user_id', Auth::id())->orderBy('id', 'DESC')->with('todos')->get();

VUE 模板

<div v-for="todo in todolist.todos" :key="todo.id">
     {{ todo.title }}
</div>

Answer 1

您没有此路由的路由参数。您的方法签名Todo $todo 将导致发生依赖注入，而不是路由模型绑定；所以$todo 是一个注入的新的不存在的 Todo 模型实例。

如果您希望它成为路由模型绑定，您需要有一个名为 todo 的路由参数。我会以不同的方式设置路线，并使其更像是一个嵌套资源的想法：

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

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

假设 Todolist 上的关系命名为todos 以获取其所有待办事项。