Question

我已经获得了一些表单数据，我使用readonly input显示，其样式看起来像纯文本。当用户单击编辑按钮时，他们可以编辑输入并保存或取消。

我的问题显然是当用户点击取消时，他们输入到输入中的数据仍然存在（即使它没有保存到数据库中）。我试图找到一种方法将输入重置为其初始数据。我知道this answer，但它似乎无法正常工作，因为数据是在创建时获取的。

This fiddle类似，只是真实应用中的数据来自axios调用。等效的调用基本上是：

  fetch() {
      axios.get(this.endpoint)
        .then(({data}) => {
          this.name = data.data;
        });
    }

令人讨厌的是，小提琴实际上是有效的。但是在我的实际实现中它并没有。与应用程序的唯一区别是数据是一个数组。

我该如何做到这一点？

This fiddle表示我的代码实际执行的操作。

Answer 1

在代码中：

  data: () => ({
    endpoint: 'https://reqres.in/api/users',
    users: [],
    initialData: []
  }),
  //...
    edit: function(index) {
      this.users[index].disabled = false
      this.initialData = this.users
    },
    reset: function(index) {
      this.users[index].disabled = true
      this.users = this.initialData
    }

由于users和initialData是数组，因此在访问它们时必须使用index。

因此，乍一看，改变将来自：

  this.initialData = this.users

要

  this.initialData[index] = this.users[index]

但这不会奏效。由于this.users[index]是一个对象，因此每当您更改它时，它都会更改this.initialData[index]保存的内容，因为它们都指向同一个对象。另一个问题是，当你这样设置时，initialData不会被动，所以你必须使用Vue.set()。

另一件事，因为您只想重置first_name属性（您在<input v-model="user.first_name" >使用的属性），然后应将user[].first_name分配给initialData[index]。

考虑到对edit()的更改，在reset()方法中，添加[index]和.first_name字段就足够了。最终代码：

edit: function(index) {
  this.users[index].disabled = false
  Vue.set(this.initialData, index, this.users[index].first_name);
},
reset: function(index) {
  this.users[index].disabled = true
  this.users[index].first_name = this.initialData[index]
}

JSFiddle：https://jsfiddle.net/acdcjunior/z60etaqf/28/

注意：如果您要备份整个user （不只是first_name），您必须克隆< / strong>它。更改disabled属性的顺序：

edit: function(index) { Vue.set(this.initialData, index, {...this.users[index]}); this.users[index].disabled = false }, reset: function(index) { Vue.set(this.users, index, this.initialData[index]); }

JSFiddle here.在上面的示例中，使用spread syntax创建克隆。

Answer 2

输入会立即更新模型。如果你想做一些像编辑和保存的事情，你必须复制并编辑它。我使用lodash clone复制对象，然后在单击save时更新字段。（当然是向服务器发送消息。）

在Vue中重置为初始数据

2 个答案: