Vuetify очистить автозаполнение ввода программно - PullRequest
Новая
       40

Vuetify очистить автозаполнение ввода программно

1 голос
/ 05 марта 2020

Вы можете взглянуть на эту ручку:

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

Почему, когда вы нажимаете на сброс, он фактически устанавливает input = null, но на Ввод все еще показывает старое значение. Вы можете получить реальное значение, щелкнув другой btn.

Я хотел бы сбросить ввод автозаполнения с помощью другого btn, такого как это перо, вместо очищаемого btn.

Я попытался добавить: :search-input.sync="input"

Но это вызывает нежелательные побочные эффекты ... (например, оно запускает проверку формы автоматически, хотя у нее есть атрибут lazy-validation.

Что вы думаете? Кажется ошибкой? Установка нулевой модели также должна очистить ввод.

Обнаружена ошибка: https://github.com/vuetifyjs/vuetify/issues/10688

1 Ответ

1 голос
/ 05 марта 2020

Как отмечено в комментариях, это поведение изменяется в 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

...