Vue2：数据更新但html没有？

Question

我是 Vue 的新手，并且在 S.O. 上的文档和 Vue 社区的帮助下。我在学习如何制作更复杂的组件方面取得了进展。

此问题与自定义选择组件有关，其中所选选项的数据正确，但显示的 HTML 不正确。我正在提供 M.W.E.；但是，只有当自定义选择组件通过其他几个组件嵌套时才会发生这种情况。

我知道这是很多代码，所以 M.W.E.通过Code Sandbox 提供，其中每个组件都在其自己的文件中（使其更易于阅读）。

组件说明

该组件是一个高级数据过滤器，它接受一个模拟数据库的对象，例如每个键都是其对应值（“记录”）的“id”。然后它允许过滤记录的键（属性/字段）。

因此我们有最顶层的组件AdvancedFilterTable。此表允许用户动态添加和删除过滤器AdvancedFilterRows。

一个过滤器行包含 5 个简单的组件：

• 逻辑：是过滤器和/或（AdvancedFilterSelectLogic）
• 功能：应用到字段的内容 (AdvancedFilterSelectFunction)
• 属性：过滤哪个字段 (AdvancedFilterSelectProperty)
• 条件：对每个记录应用什么测试之前设置的字段 (AdvancedFilterSelectConditional)
• value：条件中要测试的值 (AdvancedFilterInput)

例如

{logic: 'and', function: 'identity', property: 'x', conditional: 'gt', value: 5}

我添加的引入错误的功能是基于AdvancedFilterSelectProperty 类型的AdvancedFilterSelectFunction 和AdvancedFilterSelectConditional 的动态选项。

例如如果选择的属性是x，其对应的值是一个数字数组，那么AdvancedFilterSelectFunction中的选项应该包括“mean”、“max”等，AdvancedFilterSelectConditional应该包括“includes”、“not包括”等。但是，如果选择了“均值”（将函数应用于属性会更改其类型），则条件应再次更改（这次删除“包括”和“不包括”）。

在提供的 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 的类型是数字，y 是字符串，z 是数组数字。

如何产生错误

1. 打开mwe Code Sandbox

2. 单击绿色加号图标以添加新过滤器

1. 单击属性选择并将x更改为z

检查组件，所有对应数据设置正确。 随着函数选择和条件选择动态变化以包含特定于数组类型数据的选项，这一点得到了进一步强调。

尽管如此，选择仍然显示“x”。尝试然后选择“x”来重置选择不起作用，因为它仍然被选择为 x...

自定义选择都通过Vue2: handling multi-child prop synchronization with models 中概述的不同封装组件传递数据 随着答案的小提琴： https://jsfiddle.net/SumNeuron/ejq86c73/9/

解决方案：https://61qky5y6mr.codesandbox.io/

Answer 1

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

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

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

<select v-model="selectedVal">

这里不需要@input函数，因为当我们选择<option>时，我们的setter对于我们的父级是$emitting，因为值正在变化

Answer 2

在AdvancedFilterSelectProperty.vue，你有一个道具selected。这会随着用户更改选择而改变。但是，<select /> 元素的 selected 属性本身正在检查表达式 key == value

value 来自组件的data。 data 不会在用户更改选择时更新，但 selected 属性肯定会更新。

因此，不要检查 data 中的 value，而是检查 selected 属性。

<select @change='updateSelected($event)'>
    <option
        v-for='(val, key) in options'
        :value='key'
        :key="key"
        :selected='key == selected'
    >
        {{val.text}}
    </option>
</select>

这解决了你的问题。

在https://codesandbox.io/s/38vlwq4yx6查看工作示例