以编程方式确认清除自动完成输入

Question

您能看一下这支笔吗？

https://codepen.io/slayerbleast/pen/mdJMqwz

为什么当您单击重置时，它实际上将输入设置为null，但是在输入上仍显示旧值。您可以通过单击另一个btn来获得实际值。

我想用另一支类似该笔的btn而不是可清除的btn重置自动完成输入。

我尝试添加：:search-input.sync="input"

但是它会带来不希望的副作用...（例如，尽管它具有惰性验证属性，但它会自动触发表单验证。

您怎么看？似乎有错误？将模型设置为null也应该清除输入。

发现错误：https://github.com/vuetifyjs/vuetify/issues/10688

Answer 1

如果检查页面元素，您将看到类似这样的内容：

它显示了两个输入元素，第二个元素采用选定的值，当您单击reset时，第二个输入元素将null作为值：

但是第一个输入仍采用选定的值，我们可以使用以下代码片段进行检查：

为了处理这种情况，我建议在您的reset方法中使用以下普通js代码：

document.querySelectorAll('.v-autocomplete input').forEach(input=>{
    input.value=""

})

Answer 2

如评论中所述，此行为在v2.2.15中更改。发行说明表明更改是有意的，

[VAutocomplete：检查初始搜索输入属性（＃10642）（e09c916），关闭＃9757＃9757＃9757

具体地说，更改的代码是VAutocomplete方法setSearch()

setSearch () {
  // Wait for nextTick so selectedItem
  // has had time to update
  this.$nextTick(() => {
    if (
      !this.multiple ||
      !this.internalSearch ||
      !this.isMenuActive
    ) {
      this.internalSearch = (
        !this.selectedItems.length ||
        this.multiple ||
        this.hasSlot
      )
        ? this.internalSearch || null       // "? null" in v2.2.14
        : this.getText(this.selectedItem)
    }
  })
},

[如果您对应用程序中的“修补”感到满意，可以通过使用自动完成中的引用来解决此问题

<template>
  <div>
    <v-autocomplete ref="autocomplete" v-model="input" :items="items" clearable></v-autocomplete>
    <v-btn @click="reset">reset</v-btn>
    <v-btn @click="value">get value</v-btn>
    <div>{{input}}</div>
  </div>
</template>

<script>
export default {
  name: "playground",
  data: () => ({
    input: null,
    items: ["a", "b", "c", "d"]
  }),
  mounted() {
    console.clear();
    console.log(this.$refs);
  },
  methods: {
    value() {
      alert("value: " + this.input);
    },
    reset() {
      this.$nextTick(() => {
        this.input = null;
        this.$refs.autocomplete.internalSearch = null;
      })
    }
  }
};
</script>

Codesandbox