How to make Vue not replace my old value after the server side validation

Question

I'm was using server side validation with laravel and fecthing the old value in case there was a validation error.

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

But now I need to validate that input on the client with vue, cause it's required for other stuff.

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

The problem is that when the validation fails on the server side the old input value get's replaced with an empty string cause Vue is initializing that variable. Please help, thanks for reading.

<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>

curious_coder · Accepted Answer · 2017-05-21 12:21:37Z

1

Since vue is overwriting the field data you can use {{ old('nombre')}} in vNombre vue data field

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

answered May 21, 2017 at 12:21

curious_coder

2,4784 gold badges28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adocad Over a year ago

Thanks! This is what I was using: $('input[name=nombre]').val(), it worked fine also, but your solution is better

Collectives™ on Stack Overflow

How to make Vue not replace my old value after the server side validation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related