Question

我使用Google地图位置自动填充输入。我试图在某种程度上强迫用户从填充的drowdowns中选择一个地址，因为我想使用选定的地方。

我遇到的问题是，我想让用户输入一个可能不会被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保存输入值。在模糊时，检查值是否已从上次保存的值更改。诀窍是确保位置更改操作在on-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

仅显示模糊警报以及是否未从下拉列表中进行选择

1 个答案: