Vuetify 以编程方式清除自动完成输入答案

【问题标题】：Vuetify clear autocomplete input programmaticallyVuetify 以编程方式清除自动完成输入
【发布时间】：2020-03-05 08:09:03
【问题描述】：

你能看看这支笔吗：

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

为什么当你点击重置时，它实际上设置了 input = null 但在输入上它仍然显示旧值。点击其他btn即可获得真正的价值。

我想用另一个像这支笔一样的 btn 来重置自动完成输入，而不是可清除的 btn。

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

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

你怎么看？似乎是一个错误？将模型设置为 null 也应该清除输入。

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

【问题讨论】：

标签： vue.js input autocomplete vuetify.js

【解决方案1】：

如 cmets 中所述，此行为在 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

【讨论】：

将 vuetify 版本设置为最新：2.2.15。停止工作：codesandbox.io/s/inspiring-saha-2xbn2。我正在寻找它破坏的版本。在 2.2.14 中工作！在 2.2.15 中没有！
好收获！这种行为应该是可配置的。

【解决方案2】：

为什么不直接使用内置的重置功能？

this.$refs[REF].reset()

【讨论】：

我建议不要在答案中使用修辞问题。他们冒着被误解为根本不是答案的风险。您正在尝试回答此页面顶部的问题，不是吗？否则请删除此帖。
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。