1

Estoy trabajando en un proyecto con Laravel 5.6 y Vue.js 2 que me está costando más de lo que pensaba.

He leído varios artículos y preguntas en esta comunidad y en todos lados he entendido que lo normal es utilizar componentes de Vue.js para pasar valores por defecto.

Al utilizar el motor de plantillas Blade para cargar un formulario por ejemplo tenemos el siguiente formulario:

<form method="{{ action('Controlador@metodo', $modelo) }}">
    <input 
        type="text" 
        name="propiedad1"
        @if(old('propiedad1'))
        value="{{ old('propiedad1') }}"
        @elseif(isset($modelo) && $modelo->propiedad1)
        value="{{ $modelo->propiedad1 }}"
        @endif
        v-model="propiedad1"
        @focusout="miFuncion">
    <input 
        type="text" 
        name="propiedad2"
        @if(old('propiedad2'))
        value="{{ old('propiedad2') }}"
        @elseif(isset($modelo) && $modelo->propiedad2)
        value="{{ $modelo->propiedad2 }}"
        @endif
        v-model="propiedad2">
</form>

Bueno, por razones lógicas (creo) lo anterior no funciona porque estamos mezclando valores que son puestos en el campo antes que el DOM se cree con campos que se crean después.

La solución "sencilla" es crear un componente, registrarlo y adaptarlo... Pero, ¿no hay una solución más fácil?

2
  • cual es tu codigo javascript el 15 feb. 2018 a las 22:36
  • ¿importa? el cambio necesario es en éste formulario.
    – Maramal
    el 15 feb. 2018 a las 22:39

1 respuesta 1

1

Es relativo decir que es más fácil o no, pues eso depende ya de cada persona.

Para resolver el problema tienes varias opciones, de las cuales voy a nombrar un par típicas, esperando que alguna de estas te parezca "más fácil":

  1. a. Utilizar templates inline

    https://v2.vuejs.org/v2/guide/components.html#Inline-Templates

    Si bien no tendrás la potencia de la reutilización del componente con este método, puedes hacer el proceso completo en tu archivo de blade:

     <my-component inline-template>
       <div>
         <p>These are compiled as the component's own template.</p>
         <p>Not parent's transclusion content.</p>
       </div>
     </my-component>
    

    b. X-templates

    Similar al anterior, el template se define en un tag <script>con type="text/x-template"

     <script type="text/x-template" id="hello-world-template">
       <p>Hello hello hello</p>
     </script>
    
     Vue.component('hello-world', {
       template: '#hello-world-template'
     })
    
  2. Mantener el componente en un archivo externo y pasar los valores que llegan de Laravel como "props" desde Blade:

    Componente Vue

     Vue.component('child', {
       props: ['message'],
       template: '<span>{{ message }}</span>'
     })
    

    Blade

     <child message="{{ $myVar }}"></child>
    

    Controlador Laravel (o lo que sea que llame la vista)

     $myVar = 'Hola';
    
     return view('message', compact('myVar'));
    
1
  • Ahora mismo estoy utilizando componentes Single-File, es que me parece tedioso crear un componente sea el que sea cada vez que Laravel interactúa con Vue.js. Se agradece igual, pensé que había una solución más "rápida" (fácil está mal usado).
    – Maramal
    el 15 feb. 2018 a las 22:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.