how can i set old input value on refresh in Vuejs

Question

im using laravel and Vuejs

how can i set the input old value on refresh or back to the page in vue dynamic component

something like this :

value="{{ old('name') }}

Do you mean , you want to reset the value of your input on page refresh. An example or a way to reproduce will be quite helpful. — skippy
– skippy, Commented Jul 23, 2017 at 23:43
no no . imagine i have a vue component which that have some inputs and user will click (next) and another comonent will apear, when user click back in browser the inputs are clear and i want it to have their old values — K1-Aria
– K1-Aria, Commented Jul 23, 2017 at 23:47
Example: Input Element state changes from initial_val -> temp_val -> new_val and then you do a refresh. Now, should the Input element be set to initial_val ? — skippy
– skippy, Commented Jul 23, 2017 at 23:58

Ikbel · Accepted Answer · 2017-07-24 03:51:24Z

1

In your blade file, create a new script tag:

<script>
var oldFormData = {
  name: "{{ old('name') }}",
  //...
}
</script>

Then in your component created callback.

created() {
  this.name = oldFormData.name // This should get {{ old('name') }} value
}

You could also pass the old data via Vue component props.

Let's say your component is my-form, then it should look like this in your blade file:

<my-form :oldData="{name: '{{ old('name') }}'}"></my-form>

Then on created:

props: ['oldData'],
created() {
  this.name = this.oldData.name
}

answered Jul 24, 2017 at 0:11

Ikbel

7,8513 gold badges36 silver badges46 bronze badges

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

6 Comments

sure . but my form is not in my blade. i have only the component tag in my blade and my form is in my vue component

It doesn't matter as long as the component is able to see oldFormData object.

when i bind a prop , that will not show into component. why?

Did you try the latest version of my answer?

yes. my props will pass to components normally . but not when i bind them

|