如何使用 Laravel 在 VueJS 中赋值？

Posted 2023-02-23

【中文标题】如何使用 Laravel 在 VueJS 中赋值？

【英文标题】：How to assign value in VueJS with Laravel?

【发布时间】：2020-08-24 18:31:03

【问题描述】：

你如何像这样分配 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 代码与刀片代码分开，我刚刚使用 @include 将我的 vuefile.js 包含到刀片中。当我尝试这个时

【问题讨论】：

您的Vue 应用程序是否嵌入了blade？

是嵌入刀片。我可以简单地在其他刀片系列中显示它。但是在文本字段 laravel 代码内部不适用

是的，它不会因为您使用 v-model 而忽略初始的 value 属性

请分享 vue.js 代码

我已经分享了 vuejs 代码

【参考方案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
,

【参考方案2】：

注意：编辑以消除我的误解并避免给未来的读者造成混淆

当您在 Vue 中的属性之前添加冒号（:value=". v-bind:value 的缩写）时，您是在说您放在引号中的任何内容都是有效的 javascript。然而，你给它传递了一个字面值：来自 Laravel 的人的名字。

因为您使用的是 v-model，您通常会在数据函数中插入初始值，而不是在 HTML 中。

data: 
    units: units,
    guest: 2,
    dates: [],
    selectedDates: [],
    rates: [],
    user: 
        first_name: '(initial value)',

此外，请确保您的数据选项实际上是一个返回值的函数，如下所示：

data() 
    return 
        units: units,
        guest: 2,
        dates: [],
        selectedDates: [],
        rates: [],
        user: 
            first_name: '(initial)',
    

edit 但是由于 Blade 在 .js 文件中与您的 Vue 选项不可用，因此您需要做出决定。我的建议最终可能是创建一个自定义表单组件，它将初始值作为道具传递。这也可以通过将表单关注点分离到它们自己的空间来清理您的 .js。如果这是您在#app 中唯一要做的事情，那么您可以使用 Blade 将初始值作为道具传递给***组件。

本质上，您将拥有一个接受对象的道具，然后您的数据函数会将每个变量的初始值设置为该道具对象的值。

【讨论】：

编辑并更新了我的答案以消除我的误解。根据您将该数据放在刀片文件中的位置，这可能具有相同的效果。