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

我今天遇到了完全相同的问题。

Vue.js版本1允许我们通过值属性为v-model提供初始值，但在2.0版本上不推荐使用此功能。

迁移指南说：

v-model不再关心内联值属性的初始值。为了可预测性，它将始终将Vue实例数据视为事实的来源。

信用到期：https://www.npmjs.com/package/vue-data-scooper

该插件的作者（和引用）标识了Vue.js中的更改，并编写了vue-data-scooper插件作为解决方法（以恢复以前的功能）。

我现在正在使用该插件（按照上述链接中的说明）并且可以确认它＆＃34;解决＆＃34;你看到的问题。

我不希望复制插件文档中的现有说明，但我没有发现它们与我使用的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(...)声明（允许插件使用初始数据对其进行排序）。

laravel形式模型绑定和vuejs

1 个答案: