typescript - Vue.js 中奇怪的“无限更新循环”

Question

我对 Vue 有一个奇怪的（我认为）问题。我编写了一个父类来处理（排序、搜索和分页）表。在我的子类中，我有以下代码，它根据用户的输入过滤我的数据：

// returns filtered data from sorted data [SubClass.vue]
protected get filteredData(): Array<any> {
    return this.sortedData.filter(data => {
        return data[this.searchingKey].toLowerCase().includes(this.searchingTerm.toLowerCase())
    })
}

这sortedData是我的父类的吸气剂，只是对我的数据数组进行排序：

// returns sorted data from store [ParentClass.vue]
protected get sortedData(): Array<any> {
    const modifier: number = (this.sortingOrder == SortingOrder.Asc) ? 1 : -1

    return this.sourceData.sort((a, b) => {
        if (a[this.sortingKey] < b[this.sortingKey]) return -1 * modifier
        if (a[this.sortingKey] > b[this.sortingKey]) return  1 * modifier
        return 0
    })
}

我的数据源如下所示：

// returns data from store [SubClass.vue]
protected get sourceData(): Array<any> {
    return this.$store.getters.data
}

这很好用。但我需要过滤功能在我的父类中。当我移动它时，我得到了这个不错的小错误：[Vue warn]: You may have an infinite update loop in a component render function.

我不知道为什么代码在我的子类中有效，但在父类中无效...

标签： typescriptvue.js