仅显示Blur的警报，如果未从下拉列表中进行选择

Question

我使用Google Maps的位置自动完成我的输入。我试图在某种程度上迫使用户从填充的滴管中选择一个地址，因为我想与该选定的地方一起工作。

我遇到的问题是，我想允许用户输入Google可能不会填充的地址，因此在Blur上，我想显示一个警报，询问用户地址是否正确。p>这里的问题是，即使我从下拉列表中进行选择，也会显示警报，因为输入会模糊。

如何确保仅在选择Google的位置并模糊时才显示警报？

<template>
    <input
           type="text"
           name="address"
           @blur="onBlur()"
    />
</template>
<script>
//...
mounted: function() {
    this.autocomplete = new google.maps.places.Autocomplete(
        document.getElementById(this.id),
        this.options
    );
    this.autocomplete.addListener('place_changed', (blur) => {
        console.log('place changed ');
        let place = this.autocomplete.getPlace();
        this.setAddress(place);
    });
},
methods: {
    onBlur() {
        this.isThisYourAddress();
    },
    isThisYourAddress() {
        return swal('test');
    }
}
</script>

Answer 1

基本思想是：使用$refs每次设置输入值。在Blur上，检查值是否从最后一个保存的值开始更改。诀窍是确保位置变化操作在Blur测试之前保存新值。我为此延迟了一些时间。您可能会放一个更好的看门人。

new Vue({
  el: '#app',
  data: {
    lastSelected: ''
  },
  mounted() {
    this.autocomplete = new google.maps.places.Autocomplete(
        document.getElementById('auto'),
        this.options
    );
    this.autocomplete.addListener('place_changed', (blur) => {
        var  place = this.autocomplete.getPlace();
        this.lastSelected = this.$refs.input.value;
        console.log('place changed ', this.lastSelected);
        this.setAddress(place);
    });
  },
  methods: {
      onBlur() {
        setTimeout(() => {
          const v = this.$refs.input.value;
          if (v !== this.lastSelected) {
            this.lastSelected = v;
            this.isThisYourAddress();
          }
        }, 100);
      },
      isThisYourAddress() {
        return 'something'
      }
  }
})

https://codepen.io/anon/pen/wxvray?editors=1111