Validation error Form Request v-model Laravel vue.js

Question

I have a problem.

I'm using a Form Request but also Vue on my form. My problem is that old('') variables does not work together with Vue v-model.

Here is an example of the input field.

<div class="form-group">
    <label for="name">{{ trans('messages.name') }}</label>
    <input type="text" name="name" v-model="name" id="name" value="{{ old('name') }}" class="form-control">
    @if($errors->has('name'))
      <span class="help">
        {{trans('Validations.name')}}
      </span>
    @endif
</div>

If I remove the v-model="name" the {{ old('name') }} variable works.

This is the error i get from Vue in the browser.

<input v-model="name" value="asdasdasd">:

inline value attributes will be ignored when using v-model. Declare initial values in the component's data option instead.

vue file

<script>
  import RangeSlider from './RangeSlider.vue';

  export default {
    components: {
      RangeSlider,
    },

    props: ['fields'],

    data() {
      return {
        name: '',
        email: '',
        phone: '',
        loading: false,
        errors: {},
      };
    },

    methods: {
      onSubmit() {
        this.loading = true;
      }
    }
  };
</script>

Answer 1

Vue does not allow you to initialise model data from the HTML, because Vue expects you to retrieve data from an API and set it from the Vue instance, which can be a pain when using it in conjunction with blade. The simplest way around this is to create a directive to make the init yourself:

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    vnode.context[binding.arg] = binding.value;
  }
})

Then use as:

<input type="text" name="name" v-model="name" id="name" v-init:name="'{{old('name')}}'" class="form-control">

Here's the JSFiddle: https://jsfiddle.net/0uvqmodc/

Answer 2

You should try this with the help of v-bind, which dynamically bind one or more attributes.

<input type="text" name="name" v-model="name" id="name" v-bind:value="old('name')" class="form-control">

However if you want to set an initial value to the input field, you can just set the data variable name as the value (old('name')) you want to set.

HTML

<input type="text" name="name" v-model="name" id="name" class="form-control">

JS

data() {
  return {
    name: 'oldValue',
    email: '',
    phone: '',
    loading: false,
    errors: {},
  };
},