如何在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進行異步加載的問題，但是我還是想學習這一點。 我認為，如果我將vue用於@show輕松請求，它將變得更加有用，即使我希望所有內容都異步加載，我也至少必須為vue提供要加載的比賽ID。

Answer 1

開箱即用：

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