BladeからVueへのネストされたデータの送信

Question

私はlaravelアプリケーションで3つのモデルを持っています：1）レッスン2）クイズ3）回答彼らの関係は次のように設定されます。各レッスンにはクイズがあり、各クイズにはアンサーがあります。ブレードファイルでは、$lessonインスタンスにアクセスできます。私は$lesson->quizzesと$quiz->answersの両方をBladeからVueJSメソッドに送信したいと思います。今、私はクイズを送ることができます：私は、quizform部分内

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

：

<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データプロパティにオブジェクトの配列を割り当てますこれらのネストされたデータセットを表示しようとしています。

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

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

quiz.answersはおそらくundefinedであるため、唯一の外v-forは動作しますが、内部v-forはないでしょう：私は私の心の中でこのような何かを持っています。

私はあなたがそのアイデアを得ることを願っています、そして、私は人々がある時点でこの状況に遭遇しているに違いないと確信しています。どのように状況を処理できますか？

Answer 1

は、このようなあなたのクイズモデルの関係を定義します。残りの部分をオフに気になります

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

あなたVueJS：あなたLaravelコントローラの方法で

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

のような何かをします。

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