Question

我正在使用laravel进行服务器端验证，并在出现验证错误的情况下记录旧值。

<input type="text" class="form-control" name="nombre" value="{{ old('nombre')}}">

但现在我需要使用vue验证客户端上的输入，因此需要其他东西。

<input type="text" class="form-control" name="nombre" value="{{ old('nombre')}}" v-model="vNombre" v-on:keyup="validarNombre">

问题是当验证在服务器端失败时，旧的输入值被替换为空字符串，因为Vue正在初始化该变量。请帮助，谢谢你的阅读。

<script type="text/javascript">
  var avatar = new Vue({
    el: '#validaciones',
    data: {
      vNombre: '',
      validNombre: false,
    },
    methods: {
      validarNombre: function(){
        if (this.vNombre == '') {
          this.validNombre = false
        }
        else {
          this.validNombre = true;
        }
      }
    }
  })
</script>

Answer 1

由于vue会覆盖字段数据，因此您可以在 vNombre vue数据字段中使用{{ old('nombre')}}

data: {
   vNombre: '{{ old("nombre")}}', //Be careful with single and double quotes
   validNombre: false,
},

如何在服务器端验证后使Vue不替换旧值

1 个答案: