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;
}
}