Vuetify自动完成不显示加载程序

如何解决Vuetify自动完成不显示加载程序

我有一个自动完成字段，该字段从后端加载数据，这是实际代码（简体）：

    <div class="form-row">
      <v-autocomplete :solo="true" v-model="user.place.value" :items="user.place.results"
         :search-input.sync="userSearchPlace"
         color="#ad5697" hide-no-data hide-selected item-text="name" item-value="id"
         label="Place" append-icon=""
      >
        <template v-slot:append>
           <v-progress-circular v-if="user.place.isPlaceLoading" indeterminate color="#ad5697"></v-progress-circular>
        </template>
     </v-autocomplete>
  </div>

<script>

export default {
   name: 'App',data: () => ({

    user: {
       userSearchPlace: null,place: {value: '',isPlaceLoading: false,results: null},}
  }),watch: {
      userSearchPlace(value) {
      this.user.place.results = []
      if (value === null || value.length < 3) return;
      this.user.place.isPlaceLoading = true
     // simulate request
      setTimeout(
          () => {
            const results = {"results": [
                {"id": "691b237b0322f28988f3ce03e321ff72a12167fd","name": "Paris","lat": -33.8599358,"lng": 151.2090295},{"id": "691b237b0322f28988f3ce03e321ff72a12167fs","name": "New York",],"status": "OK"
            };
            this.user.place.results = results.results;
            this.user.place.isPlaceLoading = false
          },5000
      )
    },}

，问题在于，当它开始加载数据并且将this.user.place.isPlaceLoading设置为true加载器时，不会显示，但是如果我默认将this.user.place.isPlaceLoading设置为true （在数据对象中）我可以一直看到加载程序。

我也尝试在:loading上使用v-autocomplete选项，而不是插槽，问题还是一样的

关于为什么加载程序无法正常工作的任何想法？谢谢建议

解决方法

您尚未在数据上声明userSearchPlace，

data: () => ({
    userSearchPlace: '',user: {
      place: {value: '',isPlaceLoading: false,results: null},}
  }),

演示：https://codesandbox.io/s/vuetify-playground-forked-wmcwz?file=/src/layout.vue