SaveComponent.vue: Editar: Obtener la película - Rest API CodeIgniter 4 - 30

La siguiente operación que vamos a iniciar hacer sería la de edición así que para esto obviamente tenemos que crear una ruta pero a diferencia de de la que ya tenemos esta va a recibir un parámetro así que aquí lo colocamos pero es opcional es decir fíjate que está resolviendo el mismo componente llamado SafeComponent.vue que lo colocamos así porque lo vamos a utilizar para crear en cuyo caso no recibe el ID del registro que queremos editar y también para editar y es por eso que esto es opcional y desde el mismo componente vamos a evaluar si estamos en fase de crear o editar según el mismo esté establecido o no entonces es por eso que aquí es opcional:

src\router.js

{
    name: 'save',
    path:'/save/:id?',
    component: Save
}

Y a partir de aquí como puedes suponer vamos a crear una variable llamada post y luego aquí sería la parte de inicialización que es lo que vamos a trabajar en este video entonces siguiendo aquí con el parámetro para chequear si está el mismo definido o no ya que es opcional otra vez para obtenerlo hacemos

src\components\SaveComponent.vue

async mounted() {

   if (this.$route.params.id) {
       await this.getMovie()
       this.init()
   }

   this.getCategories()
},

Recuerda que el dólar es referente a funciones o parámetros propiedades como lo quieras llamar internas en este caso sería interna al paquete de View router punto paras que es lo que queremos obtener seguido del nombre del parámetro que en este caso es como ID preguntamos si está definido si estamos si está definido está en fase de editar y y si no seguimos con la fase de crear es decir no hacemos nada adicional y por aquí vamos a implementar un par de métodos adicionales que sería para obtener el post en base al ID:

async getMovie() {
    this.movie = await axios.get('http://code4movies.test/api/pelicula/' + this.$route.params.id)
        .then(res => res.data)
        .catch(error => error)
},

E inicializar los campos:

init() {
   this.form.title = this.movie.titulo
   this.form.description = this.movie.descripcion
   this.form.category_id = this.movie.categoria_id
},

Finalmente, al momento de enviar el formulario, verificamos si el ID esta establecido y enviamos la petición PUT:

async send() {


    let res = ''
    if (this.movie == '') {
        const formData = new FormData()
        formData.append('titulo', this.form.title)
        formData.append('descripcion', this.form.description)
        formData.append('categoria_id', this.form.category_id)
        res = await axios.post('http://code4movies.test/api/pelicula', formData)
            .then(res => res.data) // 200
            .catch(error => error) // 500-400 
        this.cleanForm()
    } else {
        res = await axios.put('http://code4movies.test/api/pelicula/' + this.movie.id, this.form)
            .then(res => res.data) // 200
            .catch(error => error) // 500-400 
        this.cleanForm()
    }
    if (res.response.data.titulo) {
        this.errors.title = res.response.data.titulo
    }
    if (res.response.data.descripcion) {
        this.errors.description = res.response.data.descripcion
    }
    if (res.response.data.categoria_id) {
        this.errors.category_id = res.response.data.categoria_id
    }
}