将嵌套数据从 Blade 发送到 Vue

Question

我在一个 laravel 应用程序中有 3 个模型：1）第 2 课）测验 3）答案（实际上我应该将其命名为 Option）。他们的关系是这样建立的：每节课都有测验，每个测验都有答案。在刀片文件中，我可以访问 $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 可能是undefined。

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

Answer 1

在您的测验模型中定义如下关系：

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

在您的 Laravel 控制器方法中执行以下操作：

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

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

Answer 2

我的目标是在呈现视图之前处理好这个问题……但这可能会做到。

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

要将属性添加到不存在的对象中，您可以执行类似的操作

for(x in quizzes){
  if(!x.hasOwnProperty('answers')){
    quizzes.x['answers] = []; <-- could use {} for object, depends what you're using for the answers when they exist
  }
}

然后……

<div v-for="quiz in quizzes">
    <p>@{{ quiz.title }}</p>
    <div v-if="quiz.answers && quiz.answers.length > 0">
      <div v-for="answer in quiz.answers">
          <p>@{{ answer.title }}</p>
      </div>
    </div>
</div>

这是数组，现在如果answers 是一个对象，你可以使用

Object.keys(quiz.answers).length === 0 && quiz.answers.constructor === Object