'Vuetify clear autocomplete input programmatically

can you take a look on this pen:

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

Why when you click on reset, it actually sets the input = null but on the input it's still showing the old value. You can get the real value clicking the other btn.

I'd would like to reset the autocomplete input with another btn like this pen instead of the clearable btn.

I tried to add: :search-input.sync="input"

But it causes undesired side effects... (for example it triggers the form validation automatically although it has lazy-validation attribute.

What do you think? Seems a bug? Setting the model to null should clear the input too.

Found the bug: https://github.com/vuetifyjs/vuetify/issues/10688

vue.jsinputautocompletevuetify.js


Solution 1:[1]

As noted in comments, this behavior changes in v2.2.15. The release notes show that the change is deliberate,

VAutocomplete: check for inital search input prop (#10642) (e09c916), closes #9757 #9757 #9757

Specifically, the code that changes is the VAutocomplete method 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)
    }
  })
},

If you're happy with 'patching' within your app, this can be reversed by using a reference on the autocomplete 

<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

Solution 2:[2]

Why don't just use built in reset function?

this.$refs[REF].reset()

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Kostya Marinenko

Related Questions