Question

我将以下组件分配给网址/A：

export default {

  data () {
    return {
      dummyVariableToUpdateDays: true
    }
  },

  created () {
    this.dummyVariableToUpdateDays = !this.dummyVariableToUpdateDays
  },
  computed: {
    days () {
    this.dummyVariableToUpdateDays = !this.dummyVariableToUpdateDays
      return this.$store.getters.getToDoItemsWithinRange.sort(function (a, b) {
        return new Date(b.onlyDate) - new Date(a.onlyDate)
      })
    }
  }
}

在我第一次访问此网址时正确计算了

days值。但是，如果我第二次访问url A，它将再次计算，并且计算属性中的getter函数仍然会给出旧值（实际上在另一个组件中更改）。

Answer 1

您注意到上述行为的原因是因为vue没有获取对索引上的数组元素所做的更改，这记录为here。

通过直接设置索引（例如arr [0] = val）或修改其length属性来修改数组。同样，Vue.js无法获取这些更改。始终使用Array实例方法修改数组，或者完全替换它。 Vue提供了一个方便的方法arr。$ set（index，value），这只是arr.splice（index，1，value）的语法糖。

如上所述，您可以尝试使用：

arr.$set(index, value)

或

arr.splice(index, 1, value)

导航到组件时使用Getter重新计算计算属性

1 个答案: