对象列表的计算数组并在日期字段更改时重新排序答案

【问题标题】：Computed array of objects list and reorder on date field change对象列表的计算数组并在日期字段更改时重新排序
【发布时间】：2019-02-01 16:23:56
【问题描述】：

我列出了一个对象数组，它是一个基于预设道具的计算值，该道具包含每个对象中的日期字段，该属性是一个字符串，并且在初始渲染期间（我为测试目的预设了一些值）子组件实例已正确排序和渲染，但是当我在其中一个渲染完成后更改日期并将其设置为比之前实例中的日期更早时（将 2019-02-15 设置为2019-02-04）它应该与该项目交换位置（在本例中为日期为 2019-02-07 的实例）。

我注意到，在我手动更改日期后，计算属性会正确对数组元素进行排序，但它也会被第二次调用，然后排序的数组（legs prop）具有我设置的日期手动复制 - 它也变成了应该与我改变的那条腿交换位置的日期

数组中的每个对象都被传递给一个组件（Leg.vue），该组件获取值并呈现“腿”的实例。

<v-form>
   <leg v-for="leg in orderedLegs" :leg="leg"></leg>
</v-form>

export default {
  name: 'SearchForm',
  components: {
    Leg
  },
  props: {
   legs: {
    type: Array,
    default: function () {
     return [
       { from: ["third"], to: [], date: "2019-02-20" },
       { from: ["second"], to: [], date: "2019-02-15"},
       { from: ["first"], to: [], date: "2019-02-07" }
     ]
    }
   }
  },

computed: {
  orderedLegs: function () {
    return this.legs.sort((a, b) => { return new Date(a['date']) - new 
Date(b['date']) })
  },
}

【问题讨论】：

我几乎可以肯定这是由于in place 对sort 排序的交互作用，以及 Vue 在识别数组更改方面的问题。在您的计算属性中尝试return [...this.lens].sort()
您也没有设置密钥，尽管v-for 建议这样做以防止此类麻烦。
尝试使用带有标记 deep: on 而不是计算的手表。
@MarvinIrwin 我已经用扩展运算符尝试了你的方法，对于页面的初始加载，我得到了从最新到最早日期排序的腿组件（这与我需要的相反）但是当我在其中一个实例中更改日期时，不会发生排序，根本不会调用计算属性
@NikolayVetrov 当我尝试更改从观察者内部观看的内容时，它会创建一个无限循环。您能否详细说明如何实施您的解决方案。

标签： vue.js vue-component

【解决方案1】：

尝试使用$forceUpdate (Vue.js docs) 或$nextTick (Vue.js docs)。

来自关于$forceUpdate的文档：

强制 Vue 实例重新渲染。请注意，它不会影响所有孩子组件，只有实例本身和子组件插入槽内容。

来自关于$nextTick的文档：

将回调推迟到下一个 DOM 更新周期后执行。利用在您更改一些数据以等待 DOM 之后立即执行此操作更新。这与全局 Vue.nextTick 相同，除了回调的 this 上下文自动绑定到实例调用这个方法。

例子：

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // modify data
      this.message = 'changed'
      // DOM is not updated yet
      this.$nextTick(function () {
        // DOM is now updated
        // `this` is bound to the current instance
        this.doSomethingElse()
      })
    }
  }
})

【讨论】：