autocomplete with verification

gistfile1.txt

<script setup>
import AddressAutocomplete, { verify } from '@lob/vue-address-autocomplete'
import '@lob/vue-address-autocomplete/dist/styles.css'
</script>

<template>
  <main>
    <AddressAutocomplete
      :apiKey="lobApiKey"
      @onInput="handleInput"
      @onSelect="handleSelect"
    />
    <button @click="handleSubmit">Verify</button>
    <p>
      {{verificationResult}}
    </p>
  </main>
</template>

<script>
export default {
  data() {
    return {
      address: '',
      lobApiKey: 'YOUR_LOB_API_KEY',
      verificationResult: null
    }
  },
  methods: {
    handleInput(userInput) {
      this.address = userInput
    },
    handleSelect(selectedAddress) {
      this.address = selectedAddress.value
    },
    handleSubmit() {
      verify(this.lobApiKey, this.address)
        .then((result) => {
          // Simplify response into something readable to the user
          const summary = `This address is ${result.deliverability}`
          this.verificationResult = summary
        })
        .catch((errorData) => this.verificationResult = errorData.message)
    }
  }
}
</script>

<style scoped>
  button {
    margin-top: 1em;
  }
</style>