javascript - 将嵌套数据从 Blade 发送到 Vue

Question

我在 Laravel 应用程序中有 3 个模型:1)类(class) 2)测验 3)答案(实际上我应该将其命名为 Option)。他们的关系是这样建立的:每节课都有测验，每个测验都有答案。在 Blade 文件中，我可以访问 $lesson 实例。我想将 $lesson->quizzes 和 $quiz->answers 从 Blade 发送到 VueJS 方法。现在我只能发送测验:

<modal-button color="success" size="small" icon="eye" header="View Quiz" btntxt="View Quiz" @showmodal="onShowViewQuizModal({{ $lesson->quizzes }})">
@include('partials.quizform')
</modal-button>

我在 vuejs 方法中捕获发送的测验并将对象数组分配给 vuejs 数据属性:

onShowViewQuizModal(quizzes){
    this.quizzes = quizzes;
}

在 quizform 部分中，我尝试显示这些嵌套的数据集。我心里有这样的想法:

<div v-for="quiz in quizzes">
    <p>@{{ quiz.title }}</p>

    <div v-for="answer in quiz.answers">
        <p>@{{ answer.title }}</p>
    </div>
</div>

只有外部 v-for 有效，但内部 v-for 无效，因为 quiz.answers 可能是 未定义。

我希望你能明白这个想法，我相信人们一定在某个时候遇到过这种情况。我该如何处理这种情况？

Answer 1

在测验模型中定义关系，如下所示:

public function answers()
{
    return $this->hasMany('App\Answer'); // second parameter can be used to define foreign key
}

在你的 Laravel Controller 方法中执行如下操作:

return Quiz::with('answers')->get();

你的 VueJS 会处理剩下的事情。