我是 Laravel 和 VueJS 的新手，对于困惑的代码提前深表歉意。

我一直在尝试制作一个注册表单，并将 VueJS 集成到 laravel 中以使其更具动态性。现在我一直在尝试使用 {{ }} 前面的 @ 来显示 laravel 我正在尝试集成 VueJS 但不是 VueJS 响应它只是清楚地打印:{{ error }} hoặc {{ checked ? "is":“否”}}.

Blade

@extends('layout.layout')

@section('content')
    

        

            

                

                    {{ csrf_field() }}
                    @{{ error }}
                    


                        
Step One

                        

                            
Your Name:

                            
                        


                        

                            
Your Lastname:

                            
                        


                        

                            
Your Email:

                            
                        


                        

                            
Your Phone number:

                            
                        



                        Next

                    


                    


                        
Step Two

                        

                            
Account Holder:

                            
                        


                        

                            
Your IBAN:

                            
                        


                        Previous
                        Next

                    


                    


                        
Step Three


                        

                            
                            @{{ checked ? "yes" : "no" }}
                        


                        Previous
                        Save

                    

                

            

        

    

    
    

@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();
            }
        })
    },
    dữ liệu() {
        trở lại {
            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;
                    trả về false;
                }
            }

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

        submit() {

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


    }
});

1 Câu trả lời

这不是使用 Vue.js 和 Laravel 的正确方法。通常不需要在你的 Blade 中编写所有内容，你只需在你的 .blade 文件中创建一个组件并将所有逻辑移动到你的 .vue 文件中。我建议你阅读 cái này了解如何在 Laravel/Vue 中设置一个简单的表单

关于Laravel 和 VueJS : Calling a VueJS Method Inside Blade，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60170910/