[Vuejs]-Enable loading state of an input field on a computed property

by

1👍

✅

You don’t, computed properties simply can’t change state.

You can achieve similar effects by watching searchValue.

data () {
  return {
    searchValue: '',
    isLoading: false,
    filteredElements: []
  }
},
watch: {
  searchValue: {
    immediate: true, // tells Vue to run handler function right after constructing the component
    handler () {
      // this function will be triggered when searchValue changes
      this.isLoading = true
      // give Vue chance to render the loader before doing heavy computation in 'filterElements' function
      this.$nextTick(() => {
        this.filteredElements = this.filterElements()
        this.isLoading = false
      })
    }
  }

Docs on nextTick
Docs on watchers

Edit:
Have you measured that it’s really computing that makes your drop-down slow and not rendering? Take a look at the documentation on performance, especially "Virtualizing large lists"

👤Kamil Bęben

Leave a comment