Better Way to use Laravel old and Vue.js

问题

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

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

回答1:

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.

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.

This can then be used like:

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

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

回答2:

The easy way to do this for me was in this way:

Laravel Controller

  $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

data: {

ibanIsInvalid : false,

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

In this way I can use the same view to create and edit an object, using the same form, even use laravel validation without lost the data after refresh.

If you know a better way to do that please tell me... Thanks

来源：https://stackoverflow.com/questions/44409633/better-way-to-use-laravel-old-and-vue-js

标签

laravel

Vue.js

laravel-5.4