Universal Vue.js application with Nuxt.js part#9 Put method,Edit data and Delete data from API

Repository

https://github.com/nuxt/nuxt.js

What Will I Learn?

• Put method
• Edit data from API
• Update data from API
• Process data with Vuex

Resources

• Nuxt.js Website - https://nuxtjs.org/
• Nuxt.js Github. - https://github.com/nuxt/nuxt.js
• Axios- https://github.com/axios/axios
• JSON Placeholder- https://jsonplaceholder.typicode.com/
• Vuex - https://github.com/vuejs/vuex

Difficulty

Intermediated

Tutorial Contents

We have a lot to learn in about nuxt.js, This tutorial will complement CRUD tutorial in Nuxt.js with Vuex and Axios as tools to make HTTP requests****. in the previous tutorial, We have learned how to delete data using API, this time we will do edit and update data in real time. I suggest you follow the previous tutorial. We will create a new API endpoint to edit and delete. the following is the method we will use.

• Put method

by using put method we will edit and update the data in our CRUD system. The picture below is an example of using the Put method that we will use.

Create a function on the frontend

We will first focus on the frontend to create a function and create a new button for the User to edit the data he wants. I will make a <button/> like this.

• Add button and new function

We will use the button from bootstrap and will put a new function which we will define in methods: {}.

Example:

 <div class="alert alert-primary" role="alert" v-for="item in countries" :key="item.id">
      <p>Country : {{item.name}}</p> 
      <p>Capital City: {{item.city}}</p>
      <button class="btn btn-warning" style="margin-right: 10px;" @click="editData(item)">Edit</button>
      <button class="btn btn-danger" @click="doDelete(item.id)" >Delete</button>
</div> 

• We add the edit button and we put onclick event @click="editData(item.id)"on the button, unlike the delete function that just passes id. in the editData(item) function we will pass objects that are on the item as initialized countries after the loop. The function name we will use is editData().

• Why do we include object item as parameters in the editData(item) function?
  Keep in mind that when the user presses the edit button, we have to change the input value on v-model according to the data we choose. So we will change the value of the previously empty input will be given a value based on the button in the click and bring the item value containing the data countries. We will see a clearer example in the next section
  
  

• Define editData() in methods

as we alluded to above, we will create a function that will bring the value of the item we have clicked.

Example:

 editData(item){
        console.log(item)
        this.formData.country = item.name
        this.formData.city = item.city
        this.formtData.id = item.id
      }

• We have created a local variable in the data(), if you do not remember or did not follow the previous tutorial I will give the structure as follows:

data() structure

data(){
      return{
        formData:{
          country:'',
          city:'',
          id:''
        }
      }
    },

• When it is first defined the variable is an empty string ' ', We can assign a value to that variable with the existing data in the item parameter. We can access the variables in the data() by using this. Because the data in the form object we will access the object name first this.formData.country = item.name

Result:

• Create dynamic buttons

After we finish the user input we need to create a button that will automatically be replaced when the user clicks the edit button, because we do not want the user to use the same button when submitting data and edit data, of course, it is not good from the user experience. We will make a simple v-if and v-else work like a switch.

Example:

<button v-if="toggleBtn" @click.prevent="add(formData)" class="btn btnprimary">Submit</button>
<button v-else @click.prevent="doUpdate()" class="btn btn-warning">Update</button>

• I will create a new variable toggleBtn in data() as a reference to select the edit button or submit button that will be displayed, the variable will be boolean (true or false). the default valur from toggleBtn is true, so submit button data will appear first.

data()

data(){
      return{
        formData:{
          country:'',
          city:'',
          id:''
        },
        toggleBtn: true
      }
    },

• We will change the toggleBtn value to false when the user clicks the edit button.
  Example:

editData(item){
        this.toggleBtn = false //changed the toggleBtn value to false
        this.formData.country = item.name
        this.formData.city = item.city
        this.formData.id = item.id
      },

Result:

Udapte data to the API

We have set up the frontend we will now deal with Vuex and Axios to update the data to the API, we will first create the doUpdate() function in the method: {}.

Example:

doUpdate(){
        this.$store.dispatch('updateData',
        {
          id: this.formData.id,
          name: this.formData.country,
          city: this.formData.city
        })
        this.formData.country = ''
        this.formData.id = ''
        this.formData.city = ''
      }

• We will use the dispatch() function, the first parameter is the name of the action function in vuex and the second parameter is the value of the input object that we pass into vuex.
• Then we will normalize the input value of v-model to an empty string again this.formData.country = ' ', this.formData.id = ' ', this.formData.city = ' '.
  
  
• Create action updateData() in Vuex

We will create updateData() in the action, as follows , we will use the put method to update as we discussed above. for more detail we will see the details as follows:

Example:

async updateData ({commit}, data){
        const res = await axios.put('country/'+data.id, {name: data.name, city:data.city});
        commit('updateChange',data)
    }

• We pass the data parameter as object. so when we want to take the id in the data object, we can do it like this data.id. the put method has two parameters, the first parameter is the URL API and the second parameter is the value that will replace the previous value, the data is in the form object.
• commit('updateChange',data) We commit data to change state. when commit we pass the data object, to change the state value.
  
  
• Create function in mutation to change state

The data has been successfully updated, but the data on the state has not changed, to change it we need to create a function in mutations to change the data.

Example:

updateChange(state, data){
        const target = state.countries.find(p=> p.id === data.id)
        target.name = data.name
        target.city = data.city
    }

We change the value of theconst target that has been adjusted to data.id.
so the target represents the state whose value is replaced by the data in the data object target.name = data.name

Result:

We have successfully built the CRUD system on Nuxt.js using Vuex and Axios, in this tutorial series we have finished Edit and delete. thank you for following this tutorial hopefully this tutorial help you.

Curriculum

Learn Nuxt#1 Nuxt structure, Global CSS, Request API
Learn Nuxt#2 Vuex in Nuxt.js, Classic Mode and Modules Mode
Learn Nuxt#3 Create components, Reusable components and Nuxt-link
Learn Nuxt#4 Dynamic components, Props, Transition page, Dynamic pages
Learn Nuxt#5 Create Database API, Request data, Setup Port
Learn Nuxt#6 Create Store in Vuex, Request data in Vuex, Data centralized
Learn Nuxt#7 mapActions, Submit data, Process data with Vuex
Learn Nuxt#8 Learn how to write mapActions, Delete data from API, Delete data with Vuex

Proof of Work Done

https://github.com/milleaduski/learnNuxtjs