Question

我正在列出一个对象数组，该对象数组是基于预设道具的计算值，该预设道具在每个对象中都包含一个字符串的日期字段，并且在初始渲染期间（为了测试目的已经预设了一些值）子组件实例正确排序和呈现，但是当我更改其中所有呈现后的日期时，将其设置为早于实例中的日期（将 2019-02-15 设置为 2019-02-04 ）应该使用该项目切换位置（在这种情况下，日期为 2019-02-07 的实例）。

我注意到，在手动更改日期之后，calculated属性会正确地对数组元素进行排序，但也会再次调用它，然后排序的数组（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']) })
  },
}

Answer 1

尝试使用$forceUpdate（Vue.js docs）或$nextTick（Vue.js docs）。

摘自有关$forceUpdate的文档：

强制重新渲染Vue实例。请注意，这并不影响所有孩子组件，只有实例本身和具有插入的广告位内容。

摘自有关$nextTick的文档：

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

示例：

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

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

1 个答案: