Estoy siguientdo dos tutoriales, el de "Roles y permisos" y el de crud en laravel con vuejs, decidí crear un proyecto en el cual he creado las rutas como se enseña en el tuto de "Roles y permisos" y el crud lo quiero hacer como se muestra en el tuto de "Crud en laravel con Vuejs", lo que he tengo es esto:
Mi ruta:
Route::get('products', 'ProductController@index')->name('products.index')->middleware('permission:products.index');
El Controlador:
<?php
namespace App\Http\Controllers;
use App\Product;
use Illuminate\Http\Request;
class ProductController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$products = Product::get();
return $products;
}
El Modelo:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
//
}
La Vista:
@extends('layouts.principal')
@section('content')
<div id="prod1" class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-12">
<div class="card">
<h5 class="card-header">
PRODUCTOS
@can('products.create')
<a href="{{ route('products.create') }}" class="btn btn-sm btn-primary float-right">Crear Nuevo Producto</a>
@endcan
</h5>
<div class="card-body">
<h5 class="card-title"> </h5>
<p class="card-text"> </p>
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nombre</th>
<th scope="col">Descripción</th>
<th scope="col">Creado en:</th>
<th scope="col">Actualizado en:</th>
<th colspan="2"><center>Acciones</center></th>
</tr>
</thead>
<tbody>
<tr v-for = "product in products">
<th>@{{ product.id }}</th>
<td>@{{ product.name }}</td>
<td>@{{ product.description }}</td>
<td>@{{ product.created_at }}</td>
<td>@{{ product.updated_at }}</td>
<td width="10px"><a href="#" class="btn btn-warning btn-sm">Editar</a></td>
<td width="10px"><a href="#" class="btn btn-danger btn-sm">Eliminar</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endsection
El código Vuejs:
new Vue({
el: '#prod1',
created: function(){
this.getProducts();
},
data:{
products: []
},
methods: {
getProducts: function(){
var urlProducts = 'products';
axios.get(urlProducts).then(response => {
this.products = response.data
});
}
}
});
Esto me imprime en el navegador:
[{"id":1,"name":"Mollitia optio et sed aut ut doloremque et.","description":"Autem repellat earum nemo aut.","pricing":80,"totexist":66,"minexist":10,"created_at":"2018-08-06 02:22:10","updated_at":"2018-08-06 02:22:10"},{"id":2,"name":"Maiores consectetur earum modi aut adipisci ut explicabo temporibus.","description":"Molestias delectus porro quis enim.","pricing":34,"totexist":49,"minexist":11,"created_at":"2018-08-06 02:22:10","updated_at":"2018-08-06 02:22:10"}}]
He probado retornar en el controlador de ësta manera:
return view('products.index', compact($products));
pero sin resultados positivos, en la consola del navegador no me aparecen errores, ayuda por favor.
Para unir estás tecnologías requieres hacer cosas adicionales, yo las tengo planificadas para un curso futuro.
De momento puedes estudiar estos temas: