如何避免用户单击另一个行的另一个编辑按钮

Question

我想避免在尚未完成更新时单击另一个行中的另一个按钮(编辑按钮(。我希望用户在编辑另一行之前先单击"保存"按钮。单击"保存"按钮时，如何将文本框删除或将其返回到原始表单？这是jsfiddle https://jsfiddle.net/2mh5yjeb/4/

new Vue({
  el: "#app",
  data: {
    editMode: false,
    users: [
      { name: 'mimi', email: '[e-mail]'},
      { name: 'sam', email: '[e-mail]'},
      { name: 'kev', email: 'wewe'}
    ],
    editedUser: null
  },
  methods: {
    saveData () {
    },
    editData (user) {
      this.beforEditCache = user
      this.editedUser = user
    }
  }
})

Answer 1

1. 您可以定义一个名为 editdisabled 的数据，并将其绑定到EditButton，为：disabled =" EditDisabled" 。

 <button @click="editData(user)":disabled='editDisabled'>edit</button>

2. 在您的方法中 savedata(( and editdata((在下面的操作中进行相应的操作以在单击"编辑"并单击"保存"按钮后再次启用它时禁用编辑按钮

new Vue({
  el: "#app",
  data: {
    editMode: false,
    users: [
      { name: 'mimi', email: '[e-mail]'},
      { name: 'sam', email: '[e-mail]'},
      { 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
    }
  }
})

这是JSFIDDLE，希望它有帮助：(