Обвязка модели формы laravel и vuejs

Question

У меня проблема при связывании данных с моей моделью. Когда я загружаю страницу редактирования для редактирования ресурса, я вижу входное значение во входных данных, но оно исчезает как можно скорее, поскольку оно привязано к vuejs.

Вот мои данные vuejs

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

и мои входы таковы

{!! 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() !!}

Как я могу обойти эту проблему?

Answer 1

У меня была точно такая же проблема сегодня.

Версия 1 Vue.js позволяет нам предоставлять начальные значения v-model через атрибут value, но эта функциональность устарела в версии 2.0.

Руководство по миграции говорит:

v-model больше не заботится о начальном значении атрибута встроенного значения. Для предсказуемости он всегда будет обрабатывать данные экземпляра Vue как источник правды.

Кредит, где кредит должен: https://www.npmjs.com/package/vue-data-scooper

Автор этого плагина (и цитата) идентифицирует изменение в Vue.js и написал vue-data-scooper плагин как обходной путь (для восстановления прежнего функционала).

Сейчас я использую плагин (следуя инструкциям, приведенным выше) и могу подтвердить, что он "решает" проблему, с которой вы столкнулись.

---

Я не хочу дублировать существующие инструкции, найденные в документации плагина, но я не нашел, что они точно совпали с установкой Laravel, которую я использовал (v5.4).

Конкретно я установил плагин...

npm install vue-data-scooper

... потом исправил мой app.js (что крайне мало в моем случае)...

require('./bootstrap');

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

... и бросил data: {...} декларация от моего new Vue(...) объявления (позволяющие плагину разобраться с использованием исходных данных).