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

Question

你能看看这支笔吗:

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

为什么当您点击重置时，它实际上设置了 input = null 但在输入上它仍然显示旧值。您可以点击另一个按钮获得实际价值。

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

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

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

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

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

Answer 1

如评论中所述，此行为在 v2.2.15 中发生了变化。发行说明显示更改是有意的，

VAutocomplete: check for inital search input prop (#10642) (e09c916), closes #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)
    }
  })
},

如果您对应用中的 'patching' 感到满意，可以通过在自动完成

上使用参考来扭转这种情况

<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

Answer 2

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

this.$refs[REF].reset()

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

Vuetify clear autocomplete input programmatically

autocomplete

input

vue.js

vuetify.js