在 laravel 和 vue 中验证失败时如何获取旧值答案

【问题标题】：How do you get old values when validation fails in laravel and vue在 laravel 和 vue 中验证失败时如何获取旧值
【发布时间】：2021-02-18 12:23:49
【问题描述】：

我正在使用 laravel 和 vue，我想在验证失败时检索旧值，但由于我在选择框中使用的 v-model 无法获取旧值...

<select id="role" name="role" class="form-control @error('role') is-invalid @enderror" v-model="roleType" value="{{old('role')}}">
     <option value="">Choose user role...</option>
     @foreach($roles as $role)
     <option value="{{ $role->name }}" {{ old('role', $role ) == $role->name ? 'selected' : '' }}>{{ $role->display_name }}</option>
      @endforeach
 </select>

我的 vue 脚本

window.addEventListener('load',function(){
        var app = new Vue({
            el: '#app',
            data:{
                roleType: '',
            },
        });
    });

有没有简单的方法来实现这一点？

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

这有点混合搭配您目前使用 Vue + Blade 所做的事情。我认为您正在寻找的是将 roleType （Vue 变量）分配给您从页面加载（因此来自 PHP）获得的旧输入，因为当您使用 v-model 时，您基本上是在将绑定分配给变量，你也不能真正分配value。

v-model 基本上是<some-element :value="myval" @input="myval = $event" 的简写。

我通常解决这个问题的方法是使用某种形式的组件，它的初始化如下：

{{-- some_blade_file.blade.php --}}
<form-component :init-form="@json(old())"></form-component>

现在，您的表单组件可能看起来像这样：

...
props: {
   initForm: Object,
}, 
mounted() {
   this.some_variable_in_this_component = this.initForm.some_old_value;
},

所以init-form 用作初始化 Vue 组件的初始状态。您将它传递给视图文件中的组件（这就是 Blade 的 @json 助手派上用场的地方；您也可以只使用 {{ json_encode(old()) }}，它的工作原理基本相同）。

【讨论】：