UnivateProperties/src/components/misc/address.vue

<template>
  <!-- eslint-disable max-len -->
  <div>
    <br />
    <div class="col-md-12" style="text-align:centre">
      <div class="myWell">
        <h4>Address</h4>
      </div>
      <div class="form-group row"></div>
      <div class="row" style="text-align:left">
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Street Number</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input
              class="form-control"
              type="text"
              name="streetnumber"
              v-model="address.streetNumber"
            />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Street Name</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="streetname" v-model="address.streetName" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Suburb</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="suburb" v-model="address.suburb" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>City</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="city" v-model="address.city" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Province</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
            </span>
            <select class="form-control" name="region" id="region" v-model="address.province">
              <option v-for="(region, r) in regions" :key="r">{{region.regionName}}</option>
            </select>
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Postal Code</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="postalcode" v-model="address.postalCode" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  props: {
    address: {},
  },
  computed: {
    ...mapState('timeshare', ['regions']),
  },
};
</script>

<style>
.goDown {
  margin-top: 150px;
}
</style>