Passing laravel old form data to Vue.js instance

Question

2 weeks ago I found out i couldn't solve this and went to google for a solution which dind't really give me one, maybe the wrong type of googling not sure. Let me get to the point.

I got this piece of html and vue which makes dynamically a extra phone field when a button is pressed. the thing is when a Laravel validation fails i do not know how to get the old() data into Vue, so I can push that to the phone_number_field array.

<a v-on:click="addPhoneNumberField">
    <span class="panel-title glyphicon glyphicon-plus" aria-hidden="true"></span>
</a>
<a v-on:click="deletePhoneNumberField" v-if="phone_number_field.length > 0">
    <span class="panel-title glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>

<div class="phone row" v-for="(field, index) in phone_number_field">
    <input id="phone_number_number" type="text" class="form-control" :name="'customer[phone_numbers][' + index + '][number]'" placeholder="Number" required>
    <input id="phone_number_description" type="text" class="form-control" :name="'customer[phone_numbers][' + index + '][description]'" placeholder="Description">  
</div>

Vue part

var bindUser = new Vue({
    el: '#bindUser',

    data: {
        phone_number_field: [],
    },

    methods: {
        addPhoneNumberField() {
            this.phone_number_field.push({
                number: '',
                description: ''
            })
        },

        deletePhoneNumberField(index) {
            this.phone_number_field.splice(index, 1)
        },
    },
});

I'm not that familiar with JS in general and am more curious if this is possible with Vue — Cruorzy
– Cruorzy, Commented Feb 25, 2018 at 8:51

shukshin.ivan · Accepted Answer · 2018-02-25 15:12:57Z

4

Old values are inside old('customer.phone_numbers'), so just pass it encoded into vue initiating.

Your blade template (somewhere before js include):

<script>
   var phoneValues = {!! json_encode(old('customer.phone_numbers', [])) !!};
</script>

Your js file:

data: {
    phone_number_field: phoneValues,
},

Where [] is the default value. But I think it's better to have all the initiating code in one place (blade template).

edited Feb 25, 2018 at 15:12

answered Feb 25, 2018 at 0:39

shukshin.ivan

11.4k4 gold badges58 silver badges73 bronze badges

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

3 Comments

Cruorzy Over a year ago

This results into a syntax error phone_number_field: {!! json_encode(old('customer.phone_numbers', [])) !!}, I got the Vue instance in a seperate app.js

shukshin.ivan Over a year ago

Well, you have to initiate vuejs app values in your blade template. The rest logic can be in the js file.

Cruorzy Over a year ago

So simple, thanks. this has been holding me back for a while. Also most of the times i tried to declare it within my #bindUser div, but it has to be outside the div else Vue will throw a error

Marina Mosti · Accepted Answer · 2018-02-24 23:23:12Z

0

Here's an idea.. Why don't you do something along these lines:

let phone_number_field = [];
<?php if (!empty($_POST['phone_number_field']: ?>
    phone_number_field = []; //Loop foreach or whatever you need to build it
<?php endif; ?>

Then in VUE you can just initalize it with the prepouplated or empty phone_number_field you precreated

answered Feb 24, 2018 at 23:23

Marina Mosti

4612 silver badges7 bronze badges

3 Comments

Cruorzy Over a year ago

I tried setting values outside from the view instance (in blade template) Can't get it to work.

Marina Mosti Over a year ago

@Cruorzy did you assign this variable before vue is instanced?

Cruorzy Over a year ago

I did it before my vue instance was loaded/created but within the div that the vue instance focussed on, and in there you can't/shouldn't use script tags. But it works now :)

Collectives™ on Stack Overflow

Passing laravel old form data to Vue.js instance

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related