php - 如何使用 Laravel 在 VueJS 中赋值？

Question

你如何像这样分配 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 的初学者。

注意:这个laravel代码 {{ auth->()->user()->first_name }}具有有效值，因为使用的用户已登录。

我需要学习 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
}

});

我只是想自动填充以下值

{{ auth->()->user()->first_name }}

{{ auth->()->user()->last_name }}

{{ auth->()->user()->email}}

{{ auth->()->user()->phone }}

到

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

我试图了解这个 vuejs 的流程，关于如何填充它。

我删除了一些我知道不会有帮助的不必要的代码。

更新

试过下面的答案

问题是我的 vue 代码与我刚刚使用的 Blade 代码分离 @include包括我的 vuefile.js到我的 Blade 。当我尝试这个时

Answer 1

在我的 blade file我做了这个

使用 FORM & optional()

    FORM = {
        first_name: '{{ optional(auth()->user())->first_name }}',
        last_name: '{{ optional(auth()->user())->last_name }}',
        email: '{{ optional(auth()->user())->email }}',
        phone: '{{ optional(auth()->user())->phone }}',
    }

在我的 vue file js我做了这个

user: {
  first_name: FORM.first_name,
  last_name: FORM.last_name,
  email: FORM.email,
  phone: FORM.phone
},