0

Hola soy nueva en Vue y Laravel, estoy intentando realizar un catalogo de productos y tengo algunas rutas vue en el menu principal de mi sitio, quiero que en una de los pestañas del menú en este caso en 'card' se muestre el listado de productos, para lo cual tengo el siguiente código:

Card.vue

<template>
    <div class="mt-5">
         <tr :v-for="prod in productos" key="prod">
          <td>@{{ prod.id_producto }}</td>
          <td>@{{ prod.nombre }}</td>
        </tr>
      </div>
    </template>
    <script>
    export default {
      name: "card",
      data: {
        productos: [],
      },
      created: function () {
        this.getProductos();
      },
      methods: {
        getProductos: function () {
          var url = "/Producto";
          axios
            .get(url)
            .then((response) => {
              this.productos = response.data;
            })
            .catch((error) => {
              (error) => (this.status = error.response.data.status);
              console.log(error.response.data);
              console.log(error.response.status);
              console.log(error.response.headers);
            });
        },
      },
    };
    </script>***


    

Controlador: ProductoController.php

 <?php
    
    namespace App\Http\Controllers;
    use App\bp_productos;
    
    use Illuminate\Http\Request;
    
    class ProductoController extends Controller
    {
        //
        public function index()
        {               
            $productos=bp_productos::all();
            return $productos;
        
        }
       
    }

 

Obtengo los siguientes mensajes de error: error

1

1 respuesta 1

0

Resuelto:

<script>
export default {
  name: "card",
  data: function () {
    return {
      symbols: [],
    };
  },
  created: function () {
    axios
      .get("Producto")
      .then((response) => (this.symbols = response.data))
      .catch((error) => {
        (error) => (this.status = error.response.data.status);
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      });
  },

};
</script>

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.