使用旧 Laravel 和 Vue.js 的更好方法

Posted 2023-02-22

【中文标题】使用旧 Laravel 和 Vue.js 的更好方法

【英文标题】：Better Way to use Laravel old and Vue.js

【发布时间】：2017-11-08 15:05:36

【问题描述】：

我正在使用 vue.js 2.0 和 Laravel 5.4 我想知道是否退出了一种更好的方式来发送数据控制器 -> 视图不会丢失值，被 v-model 覆盖

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

data: 
    ciudad:'',

如果我尝试做类似的事情

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

我丢失了控制器发送的值

【问题讨论】：

您需要重新提出您的问题。在当前状态下它没有意义。

【参考方案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/

【讨论】：

很好的解决方案。但是这将如何与组件一起使用？

【参考方案2】：

对我来说最简单的方法是：

Laravel 控制器

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

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

Laravel 视图

 <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 验证而不会丢失刷新后的数据。

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

【讨论】：

一个我完全忽略的好而简单的解决方案！我尝试了top voted answer，但这不起作用，因为 Vue 在初始化并在数据中设置属性时覆盖了它。

我已经在刀片文件中尝试过，但无法正常工作:(