如何使用Laravel在VueJS中分配值？

你如何像这样分配laravel值 {{ auth->()->user()->first_name }}

在此文本vuejs字段上

 <input v-model="user.first_name" type="text"
 class="form-control form-control-lg rounded-0" :value="{{ auth()->user()->first_name }}">

这是原始的html show.blade.php

<form class="my-3 font-sans-serif">
                            <div class="form-group">
                                <label for="" class="font-weight-semibold text-uppercase">First Name*</label>
                                <input v-model="user.first_name" type="text"
                                       class="form-control form-control-lg rounded-0">
                                <span class="text-danger text-xs">@{{ errors.first_name }}</span>
                            </div>
                            <div class="form-group">
                                <label for="" class="font-weight-semibold text-uppercase">Last Name</label>
                                <input v-model="user.last_name" type="text"
                                       class="form-control form-control-lg rounded-0">
                                <span class="text-danger text-xs">@{{ errors.last_name }}</span>
                            </div>
                            <div class="form-group">
                                <label for="" class="font-weight-semibold text-uppercase">Email*</label>
                                <input v-model="user.email" type="email"
                                       class="form-control form-control-lg rounded-0">
                                <span class="text-danger text-xs">@{{ errors.email }}</span>
                            </div>
                            <div class="form-group">
                                <label for="" class="font-weight-semibold text-uppercase">Phone</label>
                                <input v-model="user.phone" type="text"
                                       class="form-control form-control-lg rounded-0">
                                <span class="text-danger text-xs">@{{ errors.phone }}</span>
                            </div>
                            <button @click.prevent="submit" class="btn btn-primary w-100 text-white mt-4 mb-3">
                                Submit
                            </button>
                        </form>

我是vuejs的初学者。

注意：{{ auth->()->user()->first_name }}由于使用的用户已登录，因此该laravel代码具有有效值。

我需要学习仅了解基础知识的vuejs。

这是代码 showvue.js

const app = new Vue({
el: '#property-booking',
data: {
    units: units,
    guest: 2,
    dates: [],
    selectedDates: [],
    rates: [],
    user: {
        first_name: '',
        last_name: '',
        email: '',
        phone: ''
    },
    errors: {
        first_name: '',
        last_name: '',
        email: '',
        phone: ''
    },
    step: 1,
    type: 1,
    currency: {
        symbol: '$',
        rate: 1
    },
    minDays: 0
},
created() {
    //some on create
},
methods: {
    submit() {
        let hasError = false;

        const simpleValidate = (field, message) => {
            if (this.user[field] === '') {
                hasError = true;
                this.errors[field] = message;
            } else this.errors[field] = '';
        };

        const checkBot = (field, message) => {

            var expression = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
            var regex = new RegExp(expression);

            var expression1 = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi;
            var regex1 = new RegExp(expression1);

            if(field == 'email'){

                var expression = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
                var regex = new RegExp(expression);

                if (!this.user[field].match(regex)) {
                    hasError = true;
                    this.errors[field] = message;
                } else this.errors[field] = '';

            }else{
                if (this.user[field].match(regex) || this.user[field].match(regex1)) {
                    hasError = true;
                    this.errors[field] = message;
                } else this.errors[field] = '';
            }

        };

        simpleValidate('first_name', 'Please enter your first name');
        simpleValidate('email', 'Please enter your email address');

        if(hasError == false){
            checkBot('first_name', 'Please input valid data');
            checkBot('last_name', 'Please input valid data');
            checkBot('phone', 'Please input valid data');
            checkBot('email', 'Please input valid data');
        }

        if (hasError) return;

        const dates = this.selectedDates.sort((a, b) => a.getTime() - b.getTime());

        const currency = Object.keys(rates).find(rate => rates[rate].symbol === this.currency.symbol);

        axios.post(sBaseURI + '/property-requests', {
            property_id: this.unit.property_id,
            dates: {
                start: dates[0],
                end: dates.reverse()[0]
            },
            amount: this.price,
            guests: this.guest,
            user: this.user,
            type: this.type,
            currency : currency
        }).then(res => {
            this.previousStep();
            this.reset();
            this.$refs.datepicker.start = '';
            this.$refs.datepicker.end = '';
            swal({
                'title': "We have received your inquiry.",
                'text': 'An EliteLYFE Travel Designer will contact you shortly.',
                'type': "success",
                'showCancelButton': false,
                'showConfirmButton': true,
                'allowOutsideClick': false,
                'closeOnConfirm': false
            }, function () {
                window.location = res.data;
                swal.disableButtons();
            });

        }).catch(err => {
            console.log(err);
            swal('Something went wrong', 'Please make sure all the fields are properly filled', 'error')
        })
    },
    reset() {
        //reset codes......
    },
    incrementGuest() {
        //increment guest .....
    },
    decrementGuest() {
        // decrement guest .....
    },
    generateDateBetween(start, end) {
        // generateDate codes ...
    }
},
components: {
    Datepicker
}

}）;

我只是想自动填充以下值

1. {{ auth->()->user()->first_name }}
2. {{ auth->()->user()->last_name }}
3. {{ auth->()->user()->email}}
4. {{ auth->()->user()->phone }}

至

v模型= user.first_name, user.last_name, user.email, user.phone

如果auth()->user()->....包含一个值，则必须使用该laravel代码自动填充文本字段。但是，如果不是，则必须将文本字段重置为空白。

我正在尝试了解该vuejs的流程，以及如何进行填充。

我删除了一些我认为不会帮助的不必要的代码。

更新

尝试了以下答案

问题是我的Vue代码与我刚刚用来将我的刀片中@include包含的刀片代码分开了vuefile.js。当我尝试这个