1

Necesito usar una variable php en vuejs, hasta ahora, he intentado con las siguientes líneas sin resultados positivos, la variable PHP es $empleados

 var app = new Vue({
  el: '#app',
  mounted(){
console.log(empleados);
    },


  data: {
    empleados: '$empleados'
  }
})

Me presenta el siguiente error:

Error in mounted hook: "ReferenceError: empleados is not defined"

4
  • ¿Es una vista blade?
    – Shaz
    el 20 feb. 2019 a las 13:40
  • lo tengo linkeado a mi vista blade el 20 feb. 2019 a las 18:08
  • ¿Qué quieres decir con eso?
    – Shaz
    el 20 feb. 2019 a las 18:15
  • que hago esto en mi vista <script type="text/javascript" src="js/micomponente.js"></script>, no tengo el codigo directamente sobre el archivo de blade. el 20 feb. 2019 a las 18:23

4 respuestas 4

3

Debes tener claro que cliente y servidor son dos entes separados. EL cliente (vue.js) corre en el navegador en javascript, no tiene acceso al servidor (y mucho menos con sintaxis de php, PHP no existe en el navegador) para comunicarse con el servidor, El servidor (PHP) debe exponer un servicio web por http por el cual el cliente pueda realizar peticiones. La respuesta del servidor no son variables, puede ser texto plano, json etc, que luego tu debes administrar en vue para utilizarlo.

Si quieres renderizar (quemar) variables de php en vue si es posible pero no recomendable, esto debe ser en el servidor. Puedes pasar en forma de props a el componente

Como ejemplo te dejo este ejemplo usando laravel $phpVarialble es la variable de PHP

Blade

<componente-vue variable="{{ $phpVarialble }}" />

ComopenteVue

Vue.component('componente-vue', {
    props: ['variable']
});

También podrías intentar escapar de javascript e insertar tu variables ahi, en el servidor. ejm usando PHP puro:

 var app = new Vue({
  el: '#app',
  mounted(){
console.log(empleados);
    },
  data: {
    empleados: <?php echo $empleados ?>
  }
})

Toma en cuenta que esto no es dinámico simplemente se quemara tu variable empleados en javascript en el servidor

1
  • 1
    ¿Qué significa «quemar la variable»?
    – Shaz
    el 20 feb. 2019 a las 18:31
1

Si no deseas utilizar directamente la variable php (<?php echo $empleados; ?>) ni tampoco hacer una llamada con axios, puedes utilizar este paquete https://github.com/laracasts/PHP-Vars-To-Js-Transformer.

En tu controlador defines tu variable de este modo:

JavaScript::put([
  'empleados' => $empleados,
]);

Y para utilizarla en Vue sería de la siguiente forma:

var app = new Vue({
  ...
  data: {
    empleados: empleados,
  ...

Tu variable se almacenará en el espacio de window por lo cual podrás acceder directamente a ella, pero si no deseas que haya confusión puedes ponerle un prefijo o cambiar el namespace según esto https://github.com/laracasts/PHP-Vars-To-Js-Transformer#js_namespace.

0

No es posible acceder a variables php desde javascript a no ser que las almacenes en atributos html o en cookies o bien (la forma que te recomiendo y es más fina) se obtengan de la respuesta de un Webservice.

Podrías utilizar el cliente HTTP "Axios" https://github.com/axios/axios para hacer llamadas contra tu backend desde Vuejs y obtener los empleados de manera asíncrona.

Además de esta forma si hay cualquier tipo de problema al obtener los empleados puedes manejar la asincronía y lanzar mensajes de error en el frontend.

De esta forma al hacer la carga del componente en "mounted" puedes crear un método que llame a un servicio que te devuelva los empleados y entonces almacenar en "empleados" la respuesta que te venga del Webservice.

0

Blade Laravel

Codigo laravel

Vue Js

export Default

Codigo Vue.js

!Important La variable @php esta en CamelCase, se recibe en Vue.JS con lowercase o minúsculas

Ejemplo Mandar desde LARAVEL idUser y recibir con VUE.JS this.$attrs.iduser

0

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.