Algolia vue-places：選擇后清除輸入

Question

我正在使用vue-places組件在 Vue 中呈現 Algolia 地點搜索輸入 - 它工作得非常出色。

用戶從搜索下拉列表中選擇/接受建議后，我想清除輸入並允許他們再次搜索。 根據提供的標准示例，我嘗試在更改處理程序中將form.country.label v-model值設置回 null：

<template>
  <places
    v-model="form.country.label"
    placeholder="Where are we going ?"
    @change="selectLocation"
    :options="options">
  </places>
</template>

<script>
import Places from 'vue-places';

export default {
  data() {
    return {
      options: {
        appId: <YOUR_PLACES_APP_ID>,
        apiKey: <YOUR_PLACES_API_KEY>,
        countries: ['US'],
      },
      form: {
        country: {
          label: null,
          data: {},
        },
      },
    };
  },
  components: {
    Places,
  },
    methods: {
      selectLocation: function(event: any) {
        if (event.name !== undefined) {
          /**
           * implementation not important
           */

          this.form.country.label = null;
        }
      }
    }
}
</script>

selectLocation方法按預期觸發 - 但我找不到任何方法將輸入值保留為空。

如何從組件方法更新數據值並將其反映在引用組件中 - 在這種情況下，Algolia 放置輸入？

Answer 1

出現此問題的原因是vue-places如何代理來自底層實現的change事件。 當收到change事件時，它會廣播相同的事件，然后更新輸入值：

Places.vue :

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

這意味着在我們的更改處理程序中設置值的任何嘗試都將立即被覆蓋。

我的解決方案是創建一個ref到vue-places實例，然后使用內置Vue.nextTick使用內部places.js setVal方法調用后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);
          });
        }
      }
    }