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

如何在 Laravel Spark 中预加载 vue.js 的数据？

How can I preload data for vue.js in Laravel Spark?

laravel

vue.js

laravel-spark