Question

不确定如何标题这个问题，但这是我的情况：我有一系列对象。在其他字段中，对象具有date_beginning和date_ending字段。在展示我的对象数组时，我将它们分成两组 - 第一组在中只有 date_beginning的值，而第二组在中有一个值 date_beginning 和 date_ending字段。

类似的东西：

// 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按钮，单击该按钮时，将显示一个表单，供用户编辑两个日期。用户编辑日期，然后点击SAVE，应用程序将向后端服务器发出PATCH请求，以更新数据库中的记录。

这是我的问题：

如果用户在第一组中的任何对象的date_ending中输入日期，则用户完成输入日期后，该对象立即移至第二个列表。我知道这是VueJS＆＃34;做它的工作＆＃34;。但是，这造成的问题是用户没有机会点击＆＃34; Save＆＃34;这意味着它还没有被保存到后端，而且他们刚刚编辑的对象现在位于不同的列表中，因此他们必须再次找到它以继续编辑对象并单击“保存”。

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

有什么想法吗？

Answer 1

以下是我在上述评论中提到的组件示例。

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)
    }
  }
})

此组件实现对v-model的支持。传入值时，将创建该对象的副本。 重要提示：Object.assign执行浅复制，因此如果您有更深层次的嵌套对象，则需要使用方法复制适用于深层嵌套对象的对象。此外，每当更新值时，都会进行复制。

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

以下是codepen demonstrating组件。

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

1 个答案: