example address form

gistfile1.txt

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

<template>
  <main>
    <div class="field">
      <label for='primary_line'>Address</label>
      <AddressAutocomplete
        :apiKey="lobApiKey"
        primaryLineOnly=true
        @onInput="handleInput"
        @onSelect="handleSelect"
        class="address-autocomplete"
      />
    </div>
    <div class="field">
      <label for='secondary_line'>Apt, Suite</label>
      <input id='secondary_line' v-model="address.secondary_line" />
    </div>
    <div class="field">
      <label for='city'>City</label>
      <input id='city' v-model="address.city" />
    </div>
    <div class="field">
      <label for='state'>State</label>
      <input id='state' v-model="address.state" />
    </div>
    <div class="field">
      <label for='zip_code'>Zip</label>
      <input id='zip_code' v-model="address.zip_code" />
    </div>

    <button @click="handleSubmit">Verify</button>
    <p>
      {{verificationResult}}
    </p>
  </main>
</template>

<script>
export default {
  data() {
    return {
      address: {
        primary_line: '',
        secondary_line: '',
        city: '',
        state: '',
        zip_code: '',
      },
      lobApiKey: 'YOUR_API_KEY_HERE',
      verificationResult: null
    }
  },
  methods: {
    handleInput(userInput) {
      this.address.primary_line = 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 primary_line is ${result.deliverability}`
          this.verificationResult = summary
        })
        .catch((errorData) => this.verificationResult = errorData.message)
    }
  }
}
</script>

<style scoped>
  .address-autocomplete {
    width: 100%
  }
  button {
    margin-top: 1em;
    align-self: flex-end;
  }
  .field {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin: 0.5em 0em;
  }
  .field label {
    margin-right: 1em;
  }
  .field input {
    flex-grow: 1;
  }
</style>