Vuetify 自动完成获取输入值 - Javascript

Vuetify 是一个基于 Material Design 的 Vue 组件库，其中包括了 AutoComplete 组件。AutoComplete 组件可以根据输入过程中的变化，自动显示可能的选项。Vuetify 提供了一种方便的方式从 AutoComplete 中获取输入值。

获取输入值的方法

我们可以使用 v-model 绑定 AutoComplete 组件的 value 值到一个变量上，这样当用户从下拉菜单中选择了一个选项时，变量的值也会随之更新。在用户输入期间，我们可以使用一个叫做 input 事件的监听器来获取 AutoComplete 的值。

下面是一个使用 input 事件监听器来获取 AutoComplete 值得例子。

<template>
  <v-autocomplete v-model="selectedItem" :items="items" @input="onInput"></v-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: null,
      items: ['Apple', 'Banana', 'Cherry', 'Date'],
    };
  },
  methods: {
    onInput(value) {
      console.log(value); // 打印用户输入值
    },
  },
};
</script>

当用户输入变化时，该组件会触发 input 事件，并把用户输入值传递给该事件的监听器。事件将传递一个字符串表示用户输入的值。

更多自动完成选项

此外，Vuetify 的 AutoComplete 组件还有很多其他的选项需要掌握，例如：利用 item-value 和 item-text 属性自定义每个项的值和标签，可以使用的过滤器函数等等。请参考 Vuetify 的官方文档以获取更多信息和更详细的使用方法。

参考文献

• https://vuetifyjs.com/en/components/autocomplete
• https://vuejs.org/v2/guide/components-custom-events.html