0

En un componente Vue tengo una tabla, en la que básicamente recorro la info con un foreach, pero este componente tiene que estar cargado en un blade, mi pregunta es, cómo pasar el json al blade y que del blade lo cargue al componente?

Controlador

$Cliente=Clientes::get();
return view('TblClientes',compact('Cliente'));

Componente Vue

 created(){
  axios.get('/').then(response=>(this.Clientes=response.data));
}

Sí en una funcion retorno solo la variable Cliente y en otra retorno la vista y desde el componente hago la peticion axios sobre la funcion donde retorno cliente funciona sin problema, pero lo que necesito es hacer las dos cosas: retornar vista con la info del json en una misma funcion

1 respuesta 1

0

Soy algo nuevo en cuanto a vue, por lo tanto puede que no pueda aclarar tu duda del todo bien.

Ahora bien, para el uso de un componente de vue, debes utilizar el componente como si fuera una etiqueta html, como el siguiente ejemplo:

<subscribe-button :channel="{{ $channel }}" :initial-subscriptions="{{ $channel->subscriptions }}" />

En el cual bindeo la información trayendo de la base de datos la información del canal, que en tu caso sería

$Cliente

y lo agrego a una propiedad previamente establecida en mi componente laravel, posteriormente para recibir la información en el componente, se utiliza una propiedad, la cual quedaría de la siguiente forma:

props:{
        channel:{
            type: Object,
            required: true,
            default: () => ({})
        },
        initialSubscriptions: {
            type: Array,
            required :true,
            default: () => []
        }
    }

Y posteriormente ya podrías utilizar tu objeto desde cualquier propiedad de vue, haciendo mención de la propiedad de la siguiente forma

axios.post(`/channels/${this.channel.id}/subscriptions`)

adaptandolo a lo que necesites.

Por tanto, en tu caso puede quedar de la siguiente forma, en caso de que tu componente se llamará cliente.

<cliente :cliente="{{ $Cliente }}" />

Para el componente y

props:{
            cliente:{
                type: Object,
                required: true,
                default: () => ({})
            },
            cliente-array: {
                type: Array,
                required :true,
                default: () => []
            }
        }

Para las propiedades, ya definiendo por tu parte si lo utilizarías como array o como object.

1
  • Lo he intentado cómo dices y como me lo han sugerido muchas personas, pero el problema radica en que cuando carga el componente el navegador no response, se cicla y de ahí ya no pasa. Solo muestra los datos y de ahí ya no responde nada, ni siquiera los botones de navegación responden. Commented el 22 jul. 2019 a las 23:01

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.