Vuetify 自动完成不显示加载器

Question

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

    <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", "lat": -33.8599358, "lng": 151.2090295},
              ],
              "status": "OK"
            };
            this.user.place.results = results.results;
            this.user.place.isPlaceLoading = false
          },
          5000
      )
    },
  }

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

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

Answer 1

您尚未在数据上声明 userSearchPlace，

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

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