时间戳

首页 > 解决方案 > 如何在 Laravel 项目中构建 Vue.js 实例？

php - 如何在 Laravel 项目中构建 Vue.js 实例？

问题描述

我有一个包含多个网页的应用程序。在每个网页上，我都希望能够将 Vue 实例绑定到页面上的某个元素，以提供更动态的用户交互。

在基础 Laravel 项目中，您应该将一个 Vue 实例绑定到我已经完成的 app.js 中的#app。但是，当您在任何不包含该元素的页面上时，如果包含更多实例，则会出现“找不到元素”错误。我想您不应该将所有实例都放在 app.js 中...

在每个页面上拥有不同的 Vue 实例的一般架构是什么？我是否为每个页面创建一个新的 js 文件并包含它？

对不起我的天真！

标签： phplaravelvue.js

解决方案

您可以在生成的脚本部分上创建一个新的 Vue 实例，app.blade.php因为每个视图都（主要）为每个需要避免 Vue 警告的页面扩展

例如，Laravel Vapor网站就是这样做的，在主页你可以找到这个代码

*他们使用 CDN 来包含库而不是从 webpack 编译的库

仅用于表单的 Vue 实例

<script>
    var app = new Vue({
                el: '#form',
                data: {
                    email: '',
                    submitted: false,
                    submitting: false
                },
                methods: {
                    onSubmit: function () {
                        this.submitting = true;

                        fetch('/api/early-access', {
                            method: 'POST',
                            body: JSON.stringify({ email: this.email }),
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }).then(response => {
                            this.submitted = true;
                            this.submitting = false;
                        });
                    }
                }
            })
</script>

例如，在layouts/app.blade.php 正文的结束标记之前为脚本生成一个部分

<main class="py-4">
            @yield('content')
        </main>
    </div>
    @yield('scripts')
</body>

然后像这样在页面的 Blade 视图文件中实例化一个新的 Vue 实例

@extends('layouts.app')

@section('content')
<div class="container">
    <div id="home-page"></div>
</div>
@endsection

@section('scripts')
<script>
    new Vue({
        el: '#home-page',
    });
</script>
@stop

希望这可以帮助

推荐阅读