'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

laravelvue.jslaravel-5.4


Solution 1:[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/

Solution 2:[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

Solution 3:[3]

You have to define your value first, for example :

$oldValue = $request->old('value');

and then pass it to vue component, define props and use it in v-model

<script>
export default {
    props: {
        $oldValue : String,
    }
};
</script>

<template>
 <input class="form-control" id="ciudad" name="ciudad" type="text" v-model="oldValue">
</template>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 craig_h
Solution 2 Jose Ramirez
Solution 3 Majid Adigozalpour

Related Questions