Vuejs2 VueJS-如何延迟数据项更新？

不知道如何命名这个问题，但我的情况是：我有一个对象数组。在其他字段中，对象有一个

date\u开始

和一个

date\u结束

字段。在显示我的对象数组时，我将它们分为两组——第一组仅在

date\u开头

中有一个值，而第二组在

date\u开头

和

date\u结尾

字段中都有一个值

比如：

// Only date_beginning present
Object 1
Object 2
Object 3

// Has both date_beginning and date_ending
Object 4
Object 5
Object 6
Object 7

现在，我在每个数组项上都有一个

Edit

按钮，当单击该按钮时，将显示一个表单供用户编辑这两个日期。用户编辑日期，然后点击

保存

，应用程序将向后端服务器发出

补丁

请求，以更新数据库中的记录

这是我的问题：

如果用户在第一组中的任何对象的

date\u ending

中输入日期，则一旦用户完成输入日期，对象将立即移动到第二个列表。我知道这是VueJS“做它的工作”。但是，这造成的问题是，用户没有机会单击“保存”，这意味着该对象尚未保存到后端，而且他们刚刚编辑的对象现在位于不同的列表中，因此他们必须再次查找该对象以继续编辑该对象并单击“保存”

希望这是有道理的。因此，我试图找出一种更好的方法来延迟对对象本身的更新，或者以某种方式对VueJS隐藏此更新，以便对象不会自动排序到第二个列表中

---

有什么想法吗？

这里是一个组件的示例，它实现了我在上面的评论中提到的功能

Vue.component("edit-dates", {
  props: ["value"],
  template:`
    <div>
      <input v-model="internalDates.date_beginning" type="date">
      <input v-model="internalDates.date_ending" type="date">
      <br>
      <button @click="save">Save</button>
    <div>
  `,
  data(){
    return {
      internalDates: Object.assign({}, this.value)
    }
  },
  watch:{
    value(newVal){ this.internalDates = Object.assign({}, newVal)}
  },
  methods:{
    save(){
      // simulate an ajax patch
      setTimeout(() => {
        this.$emit('input', this.internalDates)
      }, 1000)
    }
  }
})

Vue.component（“编辑日期”{
道具：[“价值”]，
模板：`


拯救
`,
数据（）{
返回{
internalDates:Object.assign（{}，this.value）
}
},
观察：{
value（newVal）{this.internalDates=Object.assign（{}，newVal）}
},
方法：{
保存（）{
//模拟ajax补丁
设置超时（（）=>{
this.$emit（'input'，this.internalDates）
}, 1000)
}
}
})

此组件实现对

v-model

的支持。传入值时，将创建该对象的副本重要注意事项：

对象。分配

执行浅层复制，因此，如果有较深的嵌套对象，则需要使用适用于深嵌套对象的方法复制对象。此外，每当更新该值时，都会创建一个副本

由于组件正在处理数据的副本，因此组件可以选择何时发出更新的值。在上面的示例中，使用setTimeout模拟ajax调用，并且仅当时间已过时才发出更新

---

这是组件的一个示例。

在从服务器获得响应之前，不要更新正在渲染的对象。这可能意味着在编辑对象时，需要复制原始对象。@Bert是对的，只有在ajax调用成功后才更新对象，否则不要更新对象。@Bert因此，只有当用户单击“编辑”时，才需要复制对象，并将该副本放入所有表单输入的v模型中。单击“保存”并获得成功响应后，将该副本复制回组件的

数据

部分中的对象？具体取决于。如果您的组件实际执行了修补程序，那么您可以在组件上使用v-model，并且仅在成功时发出更改（v-model通过侦听

输入

事件来工作）。@Bert是的，组件执行修补程序。但是，相关对象通过

道具

传递给组件。这样我就可以在

补丁

请求成功时延迟更新的发出？因此，在我收到服务器返回的成功响应之前，对象本身不会自动移动到第二个列表（如我的问题中所述）？我将不得不研究如何做到这一点，我不知道这是可能的。很好，我会尝试一下，看看它是否能解决我的情况。谢谢