laravel窗体模型绑定和vuejs

我有一个问题，而从数据与我的模型绑定。当我加载用于编辑资源的编辑页面时，我可以在输入中看到输入值，但是它自绑定到vuejs后尽快消失。laravel窗体模型绑定和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() !!}

我怎样才能解决这个问题呢？

来源

2017-07-14 Adam nick

您的vue代码是刀片文件还是js文件？如果你使用webpack编译一个js文件？ –

@RossWilson它在js文件中。 –

是的，使用webpack编译它 –

今天我的问题完全一样。

Vue.js版本1允许我们通过value属性为v-model提供初始值，但在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);

...和下降来自我的new Vue(...)声明的data: {...}声明（允许插件使用初始数据对其进行排序）。

来源

2017-07-14 13:55:34 wally

添加了一个非常简单的javascript-light和“随船“Laravel 5.4安装。我是一个AngularJS家伙，而不是Vue--所以我的“整合”可能不太理想...... – wally

laravel窗体模型绑定和vuejs

回答

相关问题