[Vuejs]-Algolia vue-places: Clear input after selection

by

0👍

✅

The issue occurs because of how vue-places is proxying change events from the underlying implementation. When a change event is received, it broadcasts the same event and then updates the input value:

Places.vue:

this.placesAutocomplete.on('change', (e) => {
  this.$emit('change', e.suggestion);
  this.updateValue(e.suggestion.value);
});

This means that any attempt to set a value in our change handler will immediately be overridden.

My solution is to create a ref to the vue-places instance and then use the built-in Vue.nextTick to use the internal places.js setVal method after the call to updateValue:

    methods: {
      selectLocation: function(event: any) {
        if (event.name !== undefined) {
          // do something with the value

          Vue.nextTick(() => {
            // clear the input value on the next update
            this.$refs.placesSearch.placesAutocomplete.setVal(null);
          });
        }
      }
    }

Leave a comment