SaveComponent.vue: Edit: Get Movie - Rest API CodeIgniter 4 - 30

The next operation that we are going to start doing would be the editing one, so for this obviously we have to create a route but unlike the one we already have, this one is going to receive a parameter, so here we place it but it is optional, that is, notice that it is resolving the same component called SafeComponent.vue that we place like this because we are going to use it to create, in which case it does not receive the ID of the record that we want to edit and also to edit and that is why this is optional and from the same component we are going to evaluate if we are in the create or edit phase depending on whether it is established or not, so that is why it is optional here:

src\router.js

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

And from here as you can imagine we are going to create a variable called post and then here would be the initialization part which is what we are going to work on in this video so continuing here with the parameter to check if it is the same defined or not since it is optional again to obtain it we do

src\components\SaveComponent.vue

async mounted() {

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

   this.getCategories()
},

Remember that the dollar refers to functions or parameters, properties as you want to call them internal in this case it would be internal to the View router dot paras package which is what we want to obtain followed by the name of the parameter which in this case is like ID we ask if it is defined if we are if it is defined it is in the edit phase and if not we continue with the create phase, that is, we do not do anything additional and here we are going to implement a couple of additional methods that would be to obtain the post based on the ID:

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

And initialize the fields:

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

Finally, when submitting the form, we check if the ID is set and send the PUT request:

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