0

espero me puedan ayudar, recién estoy comenzando en Laravel e intento hacer lo siguiente. Tengo un controlador con datos en un array:

public function widgetIngresosVentas(Request $request){
    //if (!$request->ajax()) return redirect('/');

    $fechaActual= date('m');        

    $ingresosValorTotal = DB::table('ingresos')->sum('total');
    $ingresosValorMes = DB::table('ingresos')->whereMonth('fecha_hora', $fechaActual)->sum('total');        
    $ingresosQtxTotal = DB::table('ingresos')->count();
    $ingresosQtxMes = DB::table('ingresos')->whereMonth('fecha_hora', $fechaActual)->count(); 

    $ventasValorTotal = DB::table('ventas')->sum('total');
    $ventasValorMes = DB::table('ventas')->whereMonth('fecha_hora', $fechaActual)->sum('total');        
    $ventasQtxTotal = DB::table('ventas')->count();
    $ventasQtxMes = DB::table('ventas')->whereMonth('fecha_hora', $fechaActual)->count(); 

    $wIngresosVentas = [
        'wingresos' => [
            'i_val_total' => $ingresosValorTotal,
            'i_val_mes' => $ingresosValorMes,
            'i_qtx_total' => $ingresosQtxTotal,
            'i_qtx_mes' => $ingresosQtxMes,
            'i_msj' => 'Ingresos'
        ],
        'wventas' => [
            'v_val_total' => $ventasValorTotal,
            'v_val_mes' => $ventasValorMes,
            'v_qtx_total' => $ventasQtxTotal,
            'v_qtx_mes' => $ventasQtxMes,
            'v_msj' => 'Ventas'
        ]
    ];
    return ['wIngresosVentas' => $wIngresosVentas];
}

y los quiero leer en un archivo .vue, ya declaré el array y sus variables

<script>
  export default {
    data (){
      return {
        ArrayIngresosVentas:[],
        ingresosValorTotal:0,
        ingresosValorMes:0,
        ingresosQtxTotal:0,
        ingresosQtxTotal:0,        
      }
    },

    methods : {
widgetIngresos(){
    let me=this;
      var url= '/dashboard/widgetIngresosVentas';
      axios.get(url).then(function (response) {
          //console.log(response);
          var respuesta= response.data;
          me.ArrayIngresosVentas = respuesta.wIngresosVentas;           
      })
      .catch(function (error) {
          console.log(error);
      });
  },

    mounted() {

    }
  }
</script>

Cuando ejecuto la pagina, usando el DevTools de Chrome puedo ver que ya me carga el ArrayIngresosVentas:Object y ya tiene los arrays wingresos y wventas con todos sus campos y valores, pero no se como leer los datos, intenté un v-for pero como estoy tratando de pintar la informacion en etiquetas span... no funciona, presenta los datos pero repetidos, estuve tratando de usar un foreach pero no sirve dentro de un template.

Ya pude leer los datos usando un v-for dentro de un div, el problema es que cuando solo pongo dos datos para presentar.. todo bien, pero cuando pongo un tercer dato... me triplica los span los primeros con inforacion y el tercero en blanco

7
  • Cuál es el problema para no poder leerlo? Veo que en tu método de vue haces me.ArrayIngresosVentas = respuesta.wIngresosVentas.data;, pero ese .data parece estar de más... Podrías mostrar que tienes en la variable respuesta? Commented el 1 feb. 2020 a las 18:02
  • saludos y gracias por tu pronta respuesta. ese código lo encontré en un ejemplo de un tutorial y me ha funcionado para cuando leo datos de una tabla, yo también lo vi redundante porque se declara var respuesta= response.data y luego se le asigna me.ArrayIngresosVentas = respuesta.wIngresosVentas.data es como que estuviera dos veces el .data, pero ya le intenté quitar eso en otras funciones que tengo y si lo hago no me muestra los datos. La funcion en el controlador widgetIngresosVentas si me muestra los datos si la consulto usan la ruta Commented el 1 feb. 2020 a las 19:00
  • pero trato de leer los datos usan el v-for como cuando leo registros de una tabla pero no me funciona, la estructura que he usado es v-for="objetoin arrayObjeto" :key="objeto.id", eso me funciona cuando el registro tiene un id, pero en este caso es un arreglo simple y si le pongo sin el :key me sale que no reconoce. he buscado formas de leer arrays usando laravel pero solo he encontrado cuando envias el array directo a la vista como parametro, no se si en este caso se pueda hacer lo mismo Commented el 1 feb. 2020 a las 19:05
  • Seria mejor si muestras como lo estas intentando mostrar en el template, eso que dices de los <span> y el <div>... También cual es la estructura de ArrayIngresosVentas, Commented el 2 feb. 2020 a las 0:37
  • $wIngresosVentas = [ 'wingresos' => [ 'i_val_total' => $ingresosValorTotal, 'i_val_mes' => $ingresosValorMes, 'i_qtx_total' => $ingresosQtxTotal, 'i_qtx_mes' => $ingresosQtxMes, 'i_msj' => 'Compras' ], 'wventas' => [ 'v_val_total' => $ventasValorTotal, 'v_val_mes' => $ventasValorMes, 'v_qtx_total' => $ventasQtxTotal, 'v_qtx_mes' => $ventasQtxMes, 'v_msj' => 'Ventas' ] ]; Commented el 3 feb. 2020 a las 16:19

1 respuesta 1

0

Ya pude solucionar mi problema, adjunto el código Hice dos arrays

$wingresos = 
        array([
            'i_val_total' => $ingresosValorTotal,
            'i_val_mes' => $ingresosValorMes,
            'i_qtx_total' => $ingresosQtxTotal,
            'i_qtx_mes' => $ingresosQtxMes,
            'i_msj' => 'Compras'
        ]);

    $wventas = 
        array([
            'v_val_total' => $ventasValorTotal,
            'v_val_mes' => $ventasValorMes,
            'v_qtx_total' => $ventasQtxTotal,
            'v_qtx_mes' => $ventasQtxMes,
            'v_msj' => 'Ventas'
        ]);

    return ['wingresos'=>$wingresos, 'wventas'=>$wventas]; 

luego en el archivo .vue en methods : tengo dos funciones la que carga los datos

widgetIngresos(){
    let me=this;
      var url= '/dashboard/widgetIngresosVentas';
      axios.get(url).then(function (response) {
          var respuesta= response.data;
          me.ArrayWIngresos = respuesta.wingresos;
          me.loadWidgetIngresos();       
      })
      .catch(function (error) {
          console.log(error);
      });
  },   

y luego la que lee los datos del array y los asigna a las variables

loadWidgetIngresos(){
    let me=this;
    me.ArrayWIngresos.map(function(x){
      me.i_val_total = x.i_val_total;
      me.i_val_mes = x.i_val_mes;
      me.i_qtx_total = x.i_qtx_total;
      me.i_qtx_total = x.i_qtx_total;
      me.i_msj = x.i_msj;
    });
  },

ya solo queda llamar a las variables en la plantilla donde quieran ser presentados

<div class="info-box-content">
   <span class="info-box-text">{{i_msj}}</span>
   <span class="info-box-number">{{i_val_mes}}</span>
   <span class="info-box-number">{{i_val_total}}</span>           
</div>

y listo, funciona correctamente

1
  • No olvides por favor que si esto soluciona tu problema consideres marcar tu aporte como aceptado
    – user128299
    Commented el 3 feb. 2020 a las 18:09

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.