Vuetify autocomplete not displaying loader

Question

I have an autocomplete field, which is loading data from the backend, here is the actual code (simplified):

    <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
      )
    },
  }

and the issue is that when it starts loading data and it set this.user.place.isPlaceLoading to the true loader is not displayed, but if I set this.user.place.isPlaceLoading to true by default (in data object) I can see the loader all the time.

also I tried to use :loading option on the v-autocomplete instead of the slot and issue is the same

Owl Owl · Accepted Answer · 2020-08-12T22:27:38

You haven't declared userSearchPlace on your data,

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

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

Vuetify autocomplete not displaying loader

1 Answers