Una vez terminado el backend para nuestro CRUD en el post anterior CRUD con Laravel y Vue.js 1 vamos a crear los componentes Vue y a declararlos en el archivo correspondiente.
Al instalar las dependencias de Vue en Laravel en la carpera resouces/js se nos ha creado una carpeta llamada components donde estarán los archivos con los componentes de Vue los cuales se divide en tres partes
<template>
<!-- HTML del componente -->
</template>
<script>
// aqui irá la logica del componente
</script>
<style>
</style>
Primero crearemos en componente del formulario para crear nuevos productos, os pongo el código y despues lo comento. lo llamaremos FormComponent.vue
<template>
<div class="panel panel-default" >
<div class="panel-heading">Nuevo producto</div>
<div class="panel-body">
<!-- v-on:submit.prevent es la manera que tiene vue de enviar el formulario en este caso ejecutando newProduct -->
<form action="" v-on:submit.prevent="newProduct()">
<div class="form-group">
<label for="reference">Referencia:</label>
<input type="text" class="form-control" name="reference" v-model="reference">
</div>
<div class="form-group">
<label for="caregory">Categoria:</label>
<input type="text" class="form-control" name="category" v-model="category">
</div>
<div class="form-group">
<label for="cost">Coste:</label>
<input type="text" class="form-control" name="cost" v-model="cost">
</div>
<div class="form-group">
<label for="quantity">Cantidad:</label>
<input type="text" class="form-control" name="quantity" v-model="quantity">
</div>
<button type="submit" class="btn btn-primary">
Enviar Producto
</button>
</form>
</div>
</div>
</template>
<script>
// en export default en la funcion data tenemos que crear un objeto con las variables que recogeremos del componente
export default {
data() {
return {
reference: '',
category: '',
cost: '',
quantity: ''
}
},
mounted() {
console.log('Component form mounted.')
},
methods: {
newProduct() {
const params = {
reference: this.reference,
category: this.category,
cost: this.cost,
quantity: this.quantity
};
//eliminamos los valores para que los campos del formulario se vacien
this.reference = '';
this.category = '';
this.cost = '';
this.quantity = '';
//con this.$emit('new', product); emitirá un evento que será recogido por my-products-component por @new="addProduct"
axios.post('/producto', params)
.then((response) => {
const product = response.data;
console.log(product);
this.$emit('new', product);
});
}
}
}
</script>
Es evidente que la parte del archivo entre las etiquetas <template> es el código HTML que queremos que muestre el componente de Vue.js con la unica diferencia en este caso de que para que Vue use los valores del formulario para ser enviados hay que nombrarlos de la siguiente manera v-model="reference" dentro de la etiqueta <input> o la que corresponda.
Entre las etiquetas <script> es donde está la lógica del componente, en la función data() hemos de retornar un objeto definiendo las variables con las que vamos a trabajar, que han de coincidir con los v-model de los inputs.
Despues creamos los metodos donde vamos a crear la función newProduct() donde lo que hacemos primero es recoger las variables para enviar al backend reference: this.reference. Usamos this.reference para que sepa que es a la variable que hemos definido en la función data()y poder recoger los valores de los inputs de formulario. Despues declaramos las variables a vacias por que como ya las hemos recogido hacemos que los campos del formulario queden vacios despues de enviarlo.
Continuamos y hacemos uso de axios para enviar una peticion HTTP a la ruta especificada, por su puesto tenemos que tener nuestra ruta definida en el backend, en el archivo routes/web.php de la siguiente manera, ya pondré todas las rutas del CRUD. Y emitimos un evento que será recogido en un componente que crearemos mas adelante, this.$emit('new', product);
Route::post('/producto', [App\Http\Controllers\ProductController::class, 'store']);
Route::get('/producto/{product_id}', [App\Http\Controllers\ProductController::class, 'show']);
Route::delete('/eliminar-producto/{product_id}', [App\Http\Controllers\ProductController::class, 'delete']);
Route::get('/todos-productos', [App\Http\Controllers\ProductController::class, 'all']));
Route::put('/actualizar-producto/{product_id}', [App\Http\Controllers\ProductController::class, 'update']);
En el siguiente post, para no alargar mucho este, crearemos nuestro segundo y tercer componente para que todo nuestro CRUD funcione perfectamente y aparezcan o desaparezcan de la página los productos eliminados o creados sin tener que recargar la, igual que hariamos con Javascript o jQuery pero de una forma mas ordenada y reutilizable, ya que una vez creado el componente y registrado podemos usarlo en cualquier parte de nuestra aplicación