Vue.js Vuetify combobox对重复值调用计算setter两次

我正在使用Vue和Vuetify。我想有一个组件，使用芯片，将防止重复。默认行为是“不允许重复”，但不会向用户显示无法输入的原因。我创建了一个computed属性，在setter上，我通过设置并比较长度来检查列表中是否有重复项。但是，似乎setter被调用了两次，并且从未使用所有值调用过。下面是一个简单的代码示例：

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-row>
        <v-col cols="12">
          <v-combobox
            v-model="computedValue"
            label="I use chips"
            multiple
            chips
          ></v-combobox>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

这里有一个代码笔的链接

减少的步骤：

• 转到代码笔
• 显示控制台
• 输入“a”（输入）“b”（输入）“c”（输入）“a”（输入）

注意console.log消息

键入最后一个“a”时，您将看到两个控制台输出：

["b", "c"]
["b", "c", "a"]

我的问题是：

如何在调用setter之前访问输入的值，以便告诉用户

为什么叫两次

---

我非常喜欢vuematerial.io芯片在将复制品变成红色时的工作方式，但我看不到这样做的好方法。

您是否尝试使用插槽和一些逻辑来定义复制品的颜色？现在，我真的看不到一种方法，甚至无法知道是否输入了复制品。setter第一次被调用，newValue为[“b”，“c”]。然后立即再次呼叫，并在末尾添加“a”[“b”、“c”、“a”]。基本上，我认为正在发生的是，在调用computed属性之前，它从列表中删除“a”，并设置值，然后执行array.push（“a”）并再次设置值。因此，如果用户不小心删除了“a”，然后又重新添加了它，我真的无法区分这两者之间的区别。它们看起来是一样的。我注意到了，但我看到您只需要一个绑定到combobox模型的数据值，您可以使用

value comparator

prop将输入的值与现有值进行比较，并在其中添加一些逻辑，然后返回布尔值，例如，你认为价值并不敏感。我不知道值比较属性。我使用了一个计算属性，这样我就可以有一个setter作为一个钩子。该控件的一个用途是我有一个字段，允许用户在其中输入处理文件时忽略的文件扩展名列表。后端作业希望它包含一个“.”且大小写较低。因此，我在setter中这样做并更新数据对象。让我看看是否可以让你的建议生效。我尝试使用

值比较器

，但这允许我只键入一个项目。你是否尝试使用插槽和一些逻辑来定义重复项目的颜色？现在，我真的看不到一种方法，甚至无法知道是否输入了重复项。setter第一次被调用，newValue为[“b”，“c”]。然后立即再次呼叫，并在末尾添加“a”[“b”、“c”、“a”]。基本上，我认为正在发生的是，在调用computed属性之前，它从列表中删除“a”，并设置值，然后执行array.push（“a”）并再次设置值。因此，如果用户不小心删除了“a”，然后又重新添加了它，我真的无法区分这两者之间的区别。它们看起来是一样的。我注意到了，但我看到您只需要一个绑定到combobox模型的数据值，您可以使用

value comparator

prop将输入的值与现有值进行比较，并在其中添加一些逻辑，然后返回布尔值，例如，你认为价值并不敏感。我不知道值比较属性。我使用了一个计算属性，这样我就可以有一个setter作为一个钩子。该控件的一个用途是我有一个字段，允许用户在其中输入处理文件时忽略的文件扩展名列表。后端作业希望它包含一个“.”且大小写较低。因此，我在setter中这样做并更新数据对象。让我看看是否可以让你的建议生效。我尝试使用

值比较器

，但这只允许我键入一项

["b", "c"]
["b", "c", "a"]