如何在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