How to get old value of a field using vue inside blade.php

Asked By: Anonymous

I am having a registration form that uses vue inside Laravel blade file. I’m using a validator for invalid inputs of user and I want to get the old value of the field but now I can’t make it work since some of the fields are using vue. Here’s my code:

regist.blade.php

<div class="regist_input">
      <input type="email" name="email" v-model="email" v-bind:placeholder="placeholder_email" v-bind:class="{ error: emailError }">
      <p class="error_text" v-bind:class="{ active: emailError2 }">Invalid email.</p>
      @if($errors->has('email'))
          <p class="alert-error">
          {{ $errors->first('email') }}
          </p>
      @endif
</div>
<dd>
    <div class="regist_input">
        <input class="input_company" type="text" name="company" value="{{ old('company') }}" placeholder="company"> //this one works
    </div>
</dd>

controller

if($validator->fails()) {
    return redirect()->back()->withInput()->withErrors($validator->errors());
}

I can display its old value if out side the field, which means that my php function that validates is working.

I tried using v-bind:value="{{ old('email') }}" or :value="{{ old('email') }}" but is not working.For this one, how can I display the old value in the input field that has a vue component?

Solution

Answered By: Anonymous

You could pass the blade email data to vue using data attributes.

First should add an id to an HTML element with data attribute on it. Then use blade to parse your data and set the data attribute to email data.

<div id="email-data" data-email="{{ old('email') }}"></div>

TO BE EXACT (OP)

<input type="email"  value="{{ old('email') }}" name="email" v-model="email" id="email-data" data-email="{{ old('email') }}" v-bind:placeholder="placeholder_email"
    v-bind:class="{ error: emailError }">

Then in the created / mounted hook in vue extract the data and set to the email state.

created() {
    const el = document.getElementById('email-data')
    const email = el.dataset.email
    this.email = email
}