时间戳

首页 > 解决方案 > 在 laravel 和 vue 中验证失败时如何获取旧值

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

问题描述

我正在使用 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: '',
            },
        });
    });

有没有一种简单的方法可以实现这一目标？

标签： laravelvue.js

解决方案

这有点混合和匹配您目前使用 Vue + Blade 所做的事情。我认为您正在寻找的是roleType使用从页面加载（因此来自 PHP）获得的旧输入分配（Vue 变量），因为当您使用时，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-formVue 组件初始化的初始状态。您将它传递给视图文件中的组件（这就是 Blade 的@json助手派上用场的地方；您也可以只使用{{ json_encode(old()) }}，它的工作原理几乎相同）。

推荐阅读