Laravel 和 VueJS：在 Blade 中调用 VueJS 方法

Question

我是 Laravel 和 VueJS 的新手，对于混乱的代码，我深表歉意。

我一直在尝试制作一个注册表单，将 VueJS 集成到 laravel 中以使其更具动态性。 现在我一直在尝试使用 @ 前面的 {{ }} 来显示 laravel 我正在尝试集成 VueJS，但 VueJS 没有对此做出响应，它只是简单地打印：{{ error }} 或 {{ checked ? "yes" : "no" }}。

刀片

@extends('layout.layout')

@section('content')
    <section class="page-content">
        <div class="container">
            <article class="fillout-form">
                <form action="{{ route('account.register.new') }}" method="post" id="registerForm">
                    {{ csrf_field() }}
                    @{{ error }}
                    <section v-if="step === 1">

                        <h1>Step One</h1>
                        <p>
                            <legend for="name">Your Name:</legend>
                            <input id="name" name="name" v-model="registration.name">
                        </p>

                        <p>
                            <legend for="surname">Your Lastname:</legend>
                            <input id="surname" name="surname" v-model="registration.surname">
                        </p>

                        <p>
                            <legend for="email">Your Email:</legend>
                            <input id="email" name="email" type="email" v-model="registration.email">
                        </p>

                        <p>
                            <legend for="number">Your Phone number:</legend>
                            <input id="number" name="number" type="number" v-model="registration.number">
                        </p>


                        <button @click.prevent="next()">Next</button>

                    </section>

                    <section v-if="step === 2">

                        <h2>Step Two</h2>
                        <p>
                            <legend for="account">Account Holder:</legend>
                            <input id="account" name="account" v-model="registration.account">
                        </p>

                        <p>
                            <legend for="iban">Your IBAN:</legend>
                            <input id="iban" name="iban" v-model="registration.iban">
                        </p>

                        <button @click.prevent="prev()">Previous</button>
                        <button @click.prevent="next()">Next</button>

                    </section>

                    <section v-if="step === 3">

                        <h3>Step Three</h3>

                        <p>
                            <input type="checkbox" v-model="checked">
                            @{{ checked ? "yes" : "no" }}
                        </p>

                        <button @click.prevent="prev()">Previous</button>
                        <button @click.prevent="submit()">Save</button>

                    </section>
                </form>
            </article>
        </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="{{asset ('js/registerFlow.js')}}"></script>

@endsection

VueJS

const errors = {
    empty: 'Please fill in all fields',
    invalidmail: 'Your email is invalid',
};

const app = new Vue({
    el:'#app',
    mounted() {
        window.addEventListener("keypress", function (event) {
            if (event.keyCode === 13) {
                event.preventDefault();
                this.next();
            }
        })
    },
    data() {
        return {
            error: null,
            step:1,
            checked: false,
            registration:{
                name:null,
                surname:null,
                email:null,
                number:null,
                account:null,
                iban:null,
            },
        }
    },
    methods: {

        prev() {
            this.step--;
        },

        next() {

            this.error = "";

            if(this.step === 1)
            {
                if(!this.registration.name || !this.registration.surname || !this.registration.email || !this.registration.number)
                {
                    this.error = errors.empty;
                    return false;
                }
            }

            if(this.step === 2)
            {
                if(!this.registration.account || !this.registration.iban)
                {
                    this.error = errors.empty;
                    return false;
                }
            }
            this.step++;
        },

        submit() {

            alert('Submit to blah and show blah and etc.');
        },


    }
});

Answer 1

这不是使用 Vue.js 和 Laravel 的正确方法。通常，您只需在 .blade 文件中创建一个组件并在 .vue 文件中移动所有逻辑，而不是在刀片中编写所有内容。我建议你阅读this 了解如何在 Laravel/Vue 中设置一个简单的表单

Answer 2

问题是，您混合了两个模板引擎。您可以创建一个 Vue 组件，该组件不被刀片触及，并提交您要呈现的错误数据。