Laravel Sparkでvue.jsのデータをどのようにプリロードできますか？

Question

は、ドキュメントと例によると、私は偉大な機能完璧に動作するコードがあります。

Vue.component('admin-competitions-index', { 
data: function() { 
    return { 
     competitions: [] 
    } 
}, 

mounted() { 
    this.$http.get('/api/admin/competitions') 
     .then(response => { 
      this.competitions = response.data; 
    }); 
}, 

methods: { 
    /** 
    * Toggle whether a competition is published or not. 
    */ 
    togglePublished(competition) { 
     Spark.patch(`/api/admin/competitions/togglePublished/${competition.id}`, this.togglePublishedForm) 
      .then(response => { 
       competition.is_published = response; 
      }); 
    } 
} 
}); 

をしかし、私は、ページの読み込みに行われる余分な要求を保存するには、このコードを変更したいと思います。これが行われているLaravelやSparkのどこにでもコンベンションはありません。私は、JS変数を設定することだけが必要だと思っていますが、どこでそれを行うのが適切かはわかりません。

私はこの種のvueを非同期の読み込みに使用する点を打ち負かしていることも理解していますが、それでも私はこれを学びたいと思います。もし私がすべてを非同期的にロードしたいと思っても、少なくとも私がロードしたい競争IDをvueに供給しなければならない、私の@show安らかなリクエストにvueを使用するのがより有用になると思う。

Answer 1

これは、箱から出して動作します：

@section('scripts') 
<script> 
    var competition = {!! $competition !!}; 
</script> 
@endsection