如何在 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 restful 请求，它会变得更加有用，即使我希望异步加载所有内容，我至少必须为 vue 提供我想要加载的竞赛 ID。

Answer 1

这是开箱即用的：

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