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: {},
  };
},