Laravel & VueJS:在刀片中调用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组件，它不会被blade触及，并提交要呈现的错误数据。