将嵌套数据从 Blade 发送到 Vue

Question

我在 laravel 应用程序中有 3 个模型：1) 课程 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 方法中捕获发送的测验并将 objects 的数组分配给 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

我的目标是在渲染视图之前解决这个问题...但这可能会做到。

<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

Answer 2

像这样在您的测验模型中定义关系：

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

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

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

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

将嵌套数据从 Blade 发送到 Vue

Sending nested data from Blade to Vue

javascript

laravel

vue.js

blade