如何将两个自动完成与 vuetify 联系起来？答案

【问题标题】：How to link two autocompletes with vuetify?如何将两个自动完成与 vuetify 联系起来？
【发布时间】：2020-06-21 16:27:23
【问题描述】：

我的组件中有两个自动完成，第二个自动完成数组项取决于第一个有任何数据。

-- 第一个

          <v-col cols="12" md="1">
        <v-autocomplete
          v-model="cliente.estado"
          :loading="isLoading"
          :search-input.sync="search"
          hide-no-data
          hide-selected
          auto-select-first
          :items="listaEstado"
          item-text="sigla"
          label="Estado"
          return-object
          v-on:change="setEstado"
        ></v-autocomplete>

-- 秒

            <v-autocomplete
          v-model="cliente.municipio"
          :loading="isLoading"
          :search-input.sync="searchM"
          hide-no-data
          hide-selected
          auto-select-first
          :items="itemsMunicipio"
          return-object
          item-text="sigla"
          label="Munícipo"
        ></v-autocomplete>

在更改事件之后，我的“itemsMunicipio”从服务器接收数据，但组件没有呈现。这个问题的任何提示？

【问题讨论】：

嗨，您能否提供您的 on-change 方法以及如何获取 itemsMunucipio（数据或计算）？
嗨大卫！我使用惰性标签解决了这个问题。我也错过了我的数据角色中“searchM”的声明。我会发布决议。
你只是想在第一个有数据集后显示第二个吗？
嗨@maxshuty！是的。它们都用一个空数组初始化。在第一个自动完成触发的“更改”事件之后，我的第二个自动完成从服务器接收数据。我用惰性标签解决了这个问题。

标签： vue.js autocomplete vuetify.js

【解决方案1】：

解决了使用我的 v-autocomplete 添加惰性标记的问题。我还在 'watch' 属性中声明了一个用于搜索的新变量。

            <v-lazy>
          <v-autocomplete
            v-model="cliente.municipio"
            :loading="isLoading"
            :search-input.sync="searchM"
            hide-no-data
            auto-select-first
            :items="itemsMunicipio"
            return-object
            item-text="descricao"
            label="Municipo"
          ></v-autocomplete>
        </v-lazy>

【讨论】：