使用Laravel old和Vue.js的更好方法 [英] Better Way to use Laravel old and Vue.js

问题描述

我正在使用vue.js 2.0和Laravel 5.4进行工作，我想知道是否存在发送数据控制器的更好方法->在不丢失值的情况下，视图被v模型覆盖

Im working using vue.js 2.0 and Laravel 5.4 I would like to know if exits a better way to send data Controllers -> views without lost the value, overwrite by the v-model

因为在vue.js充电之后，它将采用这种方式定义的数据中的值

Because after charge vue.js this take the value in data that is define in this way

data: {
    ciudad:'',
}

如果我尝试做类似的事情

If I try to do something like that

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

我丢失了控制器发送的值

I lost the value sending by the controller

推荐答案

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

Vue really expects you to init data from the view model which then updates the view, however, you want to use data in the view to update the underlying model data.

我认为最简单的方法是编写一条指令，该指令从HTML中初始化值，因此您无需直接访问DOM:

I think the easiest approach to this is to write a directive that inits the value from the HTML, so you don't need to directly access the DOM:

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

这是一个抽象的东西，因此值得一看的定向钩参数部分文档.

It's a little abstract so it's worth looking at Directive Hook Arguments section of the docs.

然后可以这样使用:

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

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

Here's the JSFiddle: https://jsfiddle.net/v5djagta/

这篇关于使用Laravel old和Vue.js的更好方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！