CODEWITHSUNDEEP
vue.js
Bayanihan 4
Bayanihan 4

Reputation: 201

How can I avoid the user to click another edit button to another row?

I want to avoid the user to click another button (edit button) in another row when the update is not done yet. I want the user to click the save button first before editing another row. How can I remove the textbox or back it to original form when clicking the save button? This is the jsfiddle https://jsfiddle.net/2mh5yjeb/4/

new Vue({
  el: "#app",
  data: {
    editMode: false,
    users: [
      { name: 'mimi', email: '[email protected]'},
      { name: 'sam', email: '[email protected]'},
      { name: 'kev', email: 'wewe'}
    ],
    editedUser: null
  },
  methods: {
    saveData () {

    },
    editData (user) {
      this.beforEditCache = user
      this.editedUser = user
    }
  }
})

Upvotes: 0

Views: 58

Answers (1)

onuriltan
onuriltan

Reputation: 3908

  1. You can define a data named editDisabled and bind it to editButton as :disabled="editDisabled". 
 <button @click="editData(user)":disabled='editDisabled'>edit</button>
  1. In your methods saveData() and editData() make below operations accordingly to disable the edit buttons when click to an edit and enable it again after save button is clicked
new Vue({
  el: "#app",
  data: {
    editMode: false,
    users: [
      { name: 'mimi', email: '[email protected]'},
      { name: 'sam', email: '[email protected]'},
      { name: 'kev', email: 'wewe'}
    ],
    editedUser: null,
    editDisabled: false
  },
  methods: {
    saveData () {
      this.editDisabled = false
      this.editUser = null
      this.beforEditCache = null
      this.editedUser = null
    },
    editData (user) {
      this.editDisabled = true
      this.beforEditCache = user
      this.editedUser = user
    }
  }
})

Here is the jsfiddle, hope it helps :)

Upvotes: 2

Related Questions