ぼかしで警告を表示し、ドロップダウンからの選択が行われていない場合

Question

私は自分の入力を自動完成するためにGoogle Maps Placesを使用します。私は、選択された場所で仕事をしたいので、人口集めのドローダウンからアドレスを選択するようにユーザーに強要しようとしています。

私が持っている問題は、ユーザーがGoogleによって入力されない可能性のあるアドレスを入力できるようにすることです。そのため、アドレスが正しいかどうかをユーザーに尋ねる警告を表示します。

ここで問題となるのは、ドロップダウンから選択しても、入力がぼやけるためアラートが表示されることです。

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を使用しています。ぼかしの場合、最後に保存された値から値が変更されたかどうかを確認します。このトリックは、オンブラウがそれをテストする前に、場所の変更操作が新しい値を保存することを保証することです。私は少し遅れてそれを入れました。あなたはおそらくより良いゲートキーパーに入れることができます。

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