Question

我正在使用vue.js 2.0和Laravel 5.4我想知道是否退出更好的方式来发送数据控制器 - ＆gt;视图没有丢失值，由v模型覆盖

因为在收取vue.js之后，这会获取以这种方式定义的数据中的值

data: {
    ciudad:'',
}

如果我尝试做那样的事情

 <input  class="form-control"  id="ciudad" name="ciudad" type="text"  v-model="documento.ciudad"  value="{{ $documento->ciudad }}" >

我丢失了控制器发送的值

Answer 1

Vue确实希望您从视图模型初始化数据然后更新视图，但是，您希望使用视图中的数据来更新基础模型数据。

我认为最简单的方法是编写一个指向HTML的值的指令，这样您就不需要直接访问DOM了：

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    vnode.context[binding.arg] = binding.value;
  }
});

它有点抽象，所以值得查看文档的Directive Hook Arguments部分。

然后可以使用它：

<input v-model="ciudad" v-init:ciudad="'{{ old('ciudad') }}'">

这里是JSFiddle：https://jsfiddle.net/v5djagta/

Answer 2

这样做的简单方法就是这样：

Laravel控制器

  $documento = ReduJornada::where("id_documento",$id)->first();

  return view('documentos.redujornada')->with(compact('documento'));

Laravel View

 <input  class="form-control"  id="ciudad"  v-model="documento.ciudad"   value="{{ old('ciudad',  isset($documento->ciudad) ? $documento->ciudad : null) }}" >

Vue.js

数据：{

ibanIsInvalid : false,

documento: {
  ciudad: $('#ciudad').val(),
}

通过这种方式，我可以使用相同的视图来创建和编辑对象，使用相同的表单，甚至使用laravel验证，而不会在刷新后丢失数据。

如果您知道更好的方法，请告诉我......谢谢

更好的方式使用Laravel old和Vue.js

2 个答案: