1

Tengo una vista en laravel con un input y la directiva v-model de vue, quiero que al introducir informacion en el input, esta se pase a un componente vue.

<input type="text" name="search" v-model="search" placeholder="Search what you looking for ?">

<!-- Mostrar resultados de busqueda -->
<boxsuggestions-component v_bind:search="search"></boxsuggestions-component>

El props search del componente vue se muestra como undefined

 export default {
  props: ["search"],
   data() {
    return {
     search: this.search,
     products: [],
     page: 0
   };
  },
 };

2 respuestas 2

1

En tu vista blade declaras tu componente vue:

<tu-componente :props_a_pasar="{{json_encode(tu_variable_en_php)}}" />

Luego dentro de tu componente vue recibes el props:

export default {
 props: ["props_a_pasar"],
}

Ahora te mostrare un ejemplo real en donde quiero pasar el id del usuario autenticado al componente vue:

En mi blade:

<mi-componente :user_id="{{json_encode(Auth::user()->id)}}" />

En mi componente vue:

export default {
  props: ["user_id"],
}

Luego con this.user_id puedo utilizarlo dentro de vue

0

Utiliza la directiva v-bind.

Con esto puedes enlazarle una variable al atributo de un elemento.

<input type="text" name="search" v-model="search" placeholder="Search what you looking for ?">

<!-- Mostrar resultados de busqueda -->
<boxsuggestions-component v-bind:search="search"></boxsuggestions-component>
2
  • La variable props del componente vue se muestra como undefined
    – Vampy95
    el 21 may. 2019 a las 11:56
  • Si por lo que estoy viendo lo que quieres crear es una caja de sugerencias de búsqueda que se despliegue de un input lo que deberías hacer es que el input mismo sea un componente de Vue, y que boxsuggestions sea un componente hijo del input. En ese enlace tienes más información. dev-notes.eu/2018/05/passing-data-between-vue-components el 21 may. 2019 a las 12:13

Tu Respuesta

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

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