En Oruga UI tenemos una gran cantidad de componentes, entre ellos los componentes de formulario no pueden faltar; para los tradicionales campo de textos, existen los llamados o-input de tipo text y textarea.
Los mismo los podemos mapear con el componente de o-field el cual permite indicar otras características como el label y mensajes (que se usarán para mostrar los errores de validación:
<template>
<o-field label="Título">
<o-input value=""></o-input>
</o-field>
<o-field label="Descripción">
<o-input type="textarea" value=""></o-input>
</o-field>
<o-field label="Contenido">
<o-input type="textarea" value=""></o-input>
</o-field>
<o-field label="Categoría">
<o-select placeholder="Seleccione una categoría">
<option value="">Cate 1</option>
</o-select>
</o-field>
<o-field label="Posted">
<o-select placeholder="Seleccione un estado">
<option value="yes">Si</option>
<option value="nost">No</option>
</o-select>
</o-field>
<o-button variant="primary">Enviar</o-button>
</template>Desde el componente de las rutas, para la navegación, que se instaló anteriormente y lo vemos en otro post; la ruta será como la siguiente:
resources/js/vue/router.js
{
name:'save',
path:'/vue/save/:slug?',
component: Save
},En este caso, se usa un argumento opcional ya que, este mismo componente se usa tanto para crear registros como para editar; por lo tanto, si se le pasa el identificador, significa que se quiere editar.
En este caso, como identificador se pasa el slug, pero puede ser cualquier otro como la PK; todo depende de lo que necesite la Rest Api que es la usada en este tutorial (una rest api creada en Laravel de tipo CRUD) para obtener el detalle.
Ahora, desde el componente de Save.vue, definimos una nueva propiedad:
data() {
return {
***
post:""
};
},La cual se usará para mapear la estructura del post o la entidad que estés editando.
La misma solamente estará definida si se está en editar, si se está en el proceso de crear entonces será vacío.
En la cual registramos el post que queremos editar; cuando montamos el mencionado componente, preguntamos si el slug está o no definido:
resources/js/vue/componets/Save.vue
async mounted() {
if(this.$route.params.slug){
await this.getPost();
this.initPost();
}
this.getCategory();
},En la función de getPost(), obtenemos el detalle del post mediante el slug conectándose a la Rest Api en Laravel:
async getPost() {
this.post = await this.$axios.get("/api/post/slug/"+this.$route.params.slug);
this.post = this.post.data
},En la función de initPost() inicializamos el formulario, en otras palabras, los v-model de cada una de nuestras propiedades:
initPost(){
this.form.title = this.post.title
this.form.description = this.post.description
this.form.content = this.post.content
this.form.category_id = this.post.category_id
this.form.posted = this.post.posted
}Claro está, si y sólo si estamos editando el registro.
Y en el proceso del submit, puedes preguntar por cualquiera de las formas manejables en este componente para saber si estamos en la fase de editar o crear para saber a qué recurso rest vamos a invocar:
submit(){
this.cleanErrorsForm()
if(this.post == "")
return this.$axios.post("/api/post",
this.form
).then(res => {
console.log(res)
}).catch(error =>{
console.log(error.response.data)
if(error.response.data.title)
this.errors.title = error.response.data.title[0]
if(error.response.data.description)
this.errors.description = error.response.data.description[0]
if(error.response.data.category_id)
this.errors.category_id = error.response.data.category_id[0]
if(error.response.data.posted)
this.errors.posted = error.response.data.posted[0]
if(error.response.data.content)
this.errors.content = error.response.data.content[0]
})
// actualizar
this.$axios.patch("/api/post/"+this.post.id,
this.form
).then(res => {
console.log(res)
}).catch(error =>{
console.log(error.response.data)
if(error.response.data.title)
this.errors.title = error.response.data.title[0]
if(error.response.data.description)
this.errors.description = error.response.data.description[0]
if(error.response.data.category_id)
this.errors.category_id = error.response.data.category_id[0]
if(error.response.data.posted)
this.errors.posted = error.response.data.posted[0]
if(error.response.data.content)
this.errors.content = error.response.data.content[0]
})
},Api Rest en Laravel
Tendrás que quitar el required del proceso de validación del slug, ya que, no le estamos pasando el mismo (o crear un campo de slug en el formulario para el slug); de:
"slug" => "required|min:5|max:500|unique:posts,slug,".$this->route("post")->id,a:
"slug" => "required|min:5|max:500|unique:posts,slug,".$this->route("post")->id,Por lo demás, se crea perfectamente el registro, y si ocurren errores del servidor, se mapean los errores correspondientes y se muestran mediante el o-field de Oruga UI que como se mencionó anteriormente, este componente permite mostrar mensajes que en este caso, es para los errores de validación.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter