Vuetifyjs 中的 v-autocomplete 问题答案

【问题标题】：v-autocomplete woes in VuetifyjsVuetifyjs 中的 v-autocomplete 问题
【发布时间】：2020-05-20 16:29:14
【问题描述】：

我正在与<v-autocomplete> 合作，在定制方面似乎有点不灵活。希望有人能对此有所了解。

当页面为<v-autocomplete> 加载时，我们是否能够在输入中使用默认显示文本值？例如：

我的 items[] 数组或任何其他 data() 值中有一个值，当页面加载时，我希望默认显示其中一项（显示文本）。我可以让它在组件上显示 mount() 吗？我尝试将值绑定到 v-model 但它只会设置值，显示文本为空。

vuetifyjs.com/ru/components/autocompletes#asynchronous-items

在上面的例子中， states[] 数组有一堆值。我们可以将其中一个设置为在安装/渲染时显示为默认选择吗？我来自 React，所以请原谅我的经验不足！我还在掌握 Vue 和 Vuetify 的窍门

感谢任何帮助，谢谢！

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

你想要这样的东西吗：

<template>
  <v-app>
    <div style="padding: 20px">
      <v-autocomplete
        v-model="state"
        :items="states"
        :filter="customFilter"
        return-object
        color="white"
        item-text="name"
        label="State"
      ></v-autocomplete>
    </div>
    <div style="padding: 20px;">state selected = {{ state }}</div>
  </v-app>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    state: null,
    states: [
      { name: 'Florida', id: 1 },
      { name: 'Georgia', id: 2 },
      { name: 'Nebraska', id: 3 },
      { name: 'California', id: 4 },
      { name: 'New York', id: 5 },
    ],
  }),
  methods: {
    customFilter(item, queryText, itemText) {
      const text = item.name.toLowerCase();
      const searchText = queryText.toLowerCase();
      return text.indexOf(searchText) > -1;
    },
  },
  mounted() {
    [this.state] = this.states;
  },
};
</script>

在本例中，我使用 v-autocomplete 和 prop return-object 处理 this.state（v-model 中的变量）。

如果你不使用return-object，你必须这样做：

  mounted() {
    // [this.state] = this.states;
    this.state = 'Florida';
  },

因为在 prop item-text 中定义了 name

【讨论】：

是的，就是这样！我没有使用导致问题的返回对象。谢谢