javascript - Vue2:数据已更新但html未更新？

我是VUE的新手，在S.O.Doc和VUE社区的帮助下，我在学习如何制造更复杂的组件方面取得了进步。
这个问题是关于一个自定义的select组件的，在这个组件中，所选选项的数据是正确的，但是显示的html不是正确的。我提供了一个M.W.E.但是，只有当自定义选择组件嵌套通过几个其他组件时，才会出现这种情况。
我知道这是很多代码，所以M.W.E.是通过Code Sandbox提供的，每个组件都在它自己的文件中（使它更容易阅读）。
部件说明

组件是一个高级数据过滤器，它接受一个模拟数据库的对象，例如，每个键是其对应值（“记录”）的“id”。然后，它允许用户筛选记录的键（属性/字段）。
因此，我们有最上面的组件AdvancedFilterTable。此表允许用户动态添加和删除过滤器AdvancedFilterRows。
过滤器排包含5个简单组件：
逻辑：是过滤器和/或（AdvancedFilterSelectLogic）
函数：应用于字段的内容（AdvancedFilterSelectFunction）
属性：要筛选的字段（AdvancedFilterSelectProperty）
条件：要应用于设置字段前的每个记录的测试（AdvancedFilterSelectConditional）
值：要在条件（AdvancedFilterInput）中测试的值。
例如
{logic: 'and', function: 'identity', property: 'x', conditional: 'gt', value: 5}
我添加的引入bug的特性是基于AdvancedFilterSelectFunction类型的AdvancedFilterSelectConditional和AdvancedFilterSelectProperty的动态选项。
例如，如果所选属性是x，其中相应的值是一个数字数组，则AdvancedFilterSelectFunction中的选项应包括“平均值”、“最大值”等，而AdvancedFilterSelectConditional中的选项应包括“包括”、“不包括”等。但是，如果选择“平均值”（将函数应用于属性会更改其类型），则条件应再次更改（这时间跌落“包括”和“不包括”。
在提供的MWE中，我有下列虚拟数据：

let records = {
  a: { x: 1, y: "a string", z: [1, 2, 3, 4] },
  b: { x: 2, y: "strange?", z: [1, 2, 4] },
  c: { x: 3, y: "starts w", z: [1, 2, 3, 4] },
  d: { x: 10, y: "some let", z: [1, 2, 4, 5, 6, 7, 8] },
  e: { x: 2, y: "? qwerty", z: [1, 40] }
};

其中x的类型是number，y是string，z是array number。
如何产生错误
打开MWECode Sandbox

单击绿色加号图标添加新的过滤器

单击“选择”属性并将X更改为Z

检查组件，所有相应的数据设置正确。
由于函数select和条件select具有动态更改，以包含特定于数组类型数据的选项，因此这一点进一步得到强调。
尽管如此，选择仍然显示“x”。尝试然后选择“x”以重置选择不起作用，因为它仍被选择为x…
自定义select都通过Vue2: handling multi-child prop synchronization with models中概述的不同封装组件传递数据。
用小提琴回答：
https://jsfiddle.net/SumNeuron/ejq86c73/9/
解决方案：https://61qky5y6mr.codesandbox.io/

最佳答案

您选择的输入实际上没有任何与它们相关联的模型，因此该值永远不会显示，尽管它是广播的。但是，由于使用props委托来自父对象的值杂耍，因此实际上需要一个计算属性来处理此问题，如下所示：

computed: {
  selectedVal: {
    get() {
      return this.selected
    },
    set(value) {
      this.$emit('updateSelected', value)
    }
  }
}

然后将其应用于您的选择（至少是AdvancedFilterSelectProperty组件）：

<select v-model="selectedVal">

这里不需要@input函数，因为当我们选择一个setter值时，我们的$emitting对我们的父节点是<option>的。

关于javascript - Vue2:数据已更新但html未更新？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50990974/