eddieace
2
1
Vue

Validation error using Form Request.

Posted 2 years ago by eddieace

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. 

and here is my .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>

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.