Question

我在laravel应用程序中有3个模型：1）第2课）测验3）答案（我应该将其命名为Option）。他们的关系以这种方式建立：每个课程都有测验，每个测验都有答案。在刀片文件中，我可以访问$lesson实例。我想将Blade中的$lesson->quizzes和$quiz->answers发送到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 Controller方法中执行以下操作：

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

将嵌套数据从Blade发送到Vue

2 个答案: