laravel form model binding and vuejs

Question

I am having an issue while binding from data with my model. When I load the edit page for editing a resource, I can see the input value in the input but it disappears asap since its binded to the vuejs.

Here is my vuejs data

data: {
        form: new Form({
            title: '',
            language: [],
            poster: ''
        })
    },

and my inputs are like this

{!! Form::model($movie, ['class' => 'form-horizontal', '@submit.prevent' => 'form.updateMovie', 'id' => 'update-movie-form', 'files' => true, '@keydown' => 'form.errors.clear($event.target.name)']) !!}
....
{!! Form::text('title', 'movie title', ['class' => 'form-control', 'id' => 'title', 'v-model' => 'form.title']) !!}
....
{!! Form::close() !!}

How I can get around this issue?

Is your vue code in the blade file or a js file? If a js file are you compiling it down using webpack? — Rwd
– Rwd, Commented Jul 14, 2017 at 15:23
Cool, cool. Are you still using Laravel collective so the form degrades gracefully if javascript isn't enabled? — Rwd
– Rwd, Commented Jul 14, 2017 at 16:48
If you're not bothered if javascript is disabled then you could create a component specifically for this form. You would just need to pass $model in as a prop and assign the values to the form object. — Rwd
– Rwd, Commented Jul 14, 2017 at 17:56

wally · Accepted Answer · 2017-07-14 14:08:28Z

1

I've had exactly the same issue today.

The Vue.js version 1 allows us to provide initial values to the v-model via value attribute, but this functionality was deprecated on the version 2.0.

Migration guide says:

v-model no longer cares about the initial value of an inline value attribute. For predictability, it will instead always treat the Vue instance data as the source of truth.

Credit where credit due: https://www.npmjs.com/package/vue-data-scooper

The author of that plugin (and quote) identifies a change in Vue.js, and wrote the vue-data-scooper plugin as a work-around (to restore the former functionality).

I'm now using the plugin myself (following the instructions on the above link) and can confirm it "resolves" the issue you're seeing.

I don't wish to duplicate the existing instructions found in the plugin's documentation, but I didn't find they aligned precisely with the Laravel installation I was using (v5.4).

Specifically I installed the plugin...

npm install vue-data-scooper

...then patched my app.js (which is extremely minimal in my case)...

require('./bootstrap');

window.Vue = require('vue');
import VueDataScooper from "vue-data-scooper"
Vue.use(VueDataScooper);

...and dropped the data: {...} declaration from my new Vue(...) declarations (allowing the plugin to sort it out using initial data).

edited Jul 14, 2017 at 14:08

answered Jul 14, 2017 at 13:55

wally

3,6021 gold badge27 silver badges32 bronze badges

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

1 Comment

wally Over a year ago

Added specific instructions that I followed for a very javascript-light and "as ships" Laravel 5.4 installation. I'm an AngularJS guy, not Vue - so I my "integration" may be less than ideal...

Collectives™ on Stack Overflow

laravel form model binding and vuejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related