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

У меня возникла проблема при привязке данных к моей модели. Когда я загружаю страницу редактирования для редактирования ресурса, я вижу входное значение во входных данных, но оно исчезает как можно скорее, поскольку оно привязано к 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() !!}

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


laravel vuejs2 laravel-5.4 laravel-eloquent
person Chaudhry Waqas    schedule 14.07.2017    source источник
comment
Ваш код vue находится в файле блейда или в файле js? Если файл js вы компилируете его с помощью веб-пакета?   -  person Rwd    schedule 14.07.2017
comment
@RossWilson в файле js.   -  person Chaudhry Waqas    schedule 14.07.2017
comment
ага, компилирую с помощью webpack   -  person Chaudhry Waqas    schedule 14.07.2017
comment
Классно классно. Вы все еще используете коллектив Laravel, чтобы форма изящно деградировала, если javascript не включен?   -  person Rwd    schedule 14.07.2017
comment
ха-ха @RossWilson, что мне тогда делать, я не очень разбираюсь в vuejs   -  person Chaudhry Waqas    schedule 14.07.2017
comment
Если вас не беспокоит, что javascript отключен, вы можете создать компонент специально для этой формы. Вам просто нужно передать $model в качестве реквизита и присвоить значения объекту формы.   -  person Rwd    schedule 14.07.2017
comment
@RossWilson какой-нибудь ресурс в Интернете, на который вы можете сослаться?   -  person Chaudhry Waqas    schedule 14.07.2017
comment
Не могли бы вы отредактировать свой вопрос и добавить всю форму из вашего блейд-файла и вашего объекта Vue?   -  person Rwd    schedule 14.07.2017
comment
...или вы можете просто взглянуть на laracasts.com/series /learn-vue-2-шаг за шагом   -  person Rwd    schedule 14.07.2017

Ответы (1)


arrow_upward
1
arrow_downward

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

Vue.js версии 1 позволяет нам предоставлять начальные значения для 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(...) (позволив плагину разобраться с ним, используя исходные данные).

person wally    schedule 14.07.2017
comment
Добавлены конкретные инструкции, которым я следовал для очень легкого javascript и установки Laravel 5.4. Я парень AngularJS, а не Vue, поэтому моя интеграция может быть далеко не идеальной... - person wally; 14.07.2017