Question

我想避免用户在更新尚未完成时单击另一行中的另一个按钮（编辑按钮）。我希望用户在编辑另一行之前先单击“保存”按钮。单击保存按钮时，如何删除文本框或将其恢复为原始形式？这是jsfiddle https://jsfiddle.net/2mh5yjeb/4/

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

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

Answer 1

您可以定义一个名为 editDisabled 的数据，并将其绑定到editButton的方式为：disabled =“ editDisabled” 。

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

在您的方法中 saveData（）和 editData（）进行相应的以下操作，以在单击编辑时禁用编辑按钮，并在单击保存按钮后再次启用它

new Vue({
  el: "#app",
  data: {
    editMode: false,
    users: [
      { name: 'mimi', email: 'wewe@s.com'},
      { name: 'sam', email: 'some@mk.com'},
      { 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，希望对您有所帮助：）

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

1 个答案: