javascript - Vue2：道具设置和动态更新，但模板没有？

Question

我是 Vue 的新手。我仍在学习，SO 社区确实加速了这一点。

在弄清楚了一些核心基础知识和一些更高级的东西（例如，通过多个嵌套组件传播来自子级的数据，这是 v-model 无法完成的）之后，我开始制作更复杂的组件。

我现在遇到了一个错误。它发生在2个实例中，但我不明白为什么。Vue 检查器显示动态更新的数据。模板和/或计算值只是没有更新，我不知道为什么。

我花了两个小时试图将其修剪为更小的 MWE，但如果不降低复杂性，我就无法重现该错误（我认为这与 Vue 不喜欢依赖于通过超过 1 个组件传递的数据的组件有关）。

** MWE **

由于有一些组件，我通过代码沙箱提供 MWE：

https://codesandbox.io/s/mqoy658v9x

可以看出这是一张相当简单的表格

组件说明

• DataTable：渲染表格的主要组件
• DataTableCaptionSort：显示数据如何排序的列表
• DataTableCell：表格中的一个单元格
• DataTableFilter：过滤器...
• DataTableHeader：字段上的组件映射
• DataTableHeaderCell：标题单元格 - 如果已排序，则应在其旁边显示图标
• DataTableRow：每条记录的字段上的组件映射

DataTable 组件需要一个类似于数据库的Object，即每个key 是一条记录的标识符，其值是一条记录。每条记录都是一个对象，其中键是数据的字段。

** 错误 **

错误 - 如标题中所述 - 是上述两个组件具有正确动态更改的数据，但模板或计算值没有。

问题组件是 DataTableHeaderCell 和 DataTableCaptionSort。可以看到，单击标题会切换排序（通过升序、降序、未排序的循环）。根据排序值，标题单元格应显示向上箭头或向下箭头。同样，标题应该是显示 timsort 顺序的列表，例如 x (up) y (down)

也不行。

有人可以帮我弄清楚我做错了什么吗？

标签： javascriptvue.jsvuejs2vue-component