UnivateProperties/src/components/timeshare/buy/buyPage.vue

<template>
  <section>
    <section class="intro-single">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="title-single-box">
              <h1 class="title-single" style="text-align:left;">Timeshare To Buy</h1>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="container">
      <div class="row">
        <div class="col-md-8 offset-md-0">
          <div class="row">
            <div class="col-md-8" style="text-align:left;">
              <p>
                The resorts have been listed in their relevant provinces.
                Please select the resort for which you would like to view
                the available weeks and then select the weeks that interest
                you on the resort page.
              </p>
              <p>
                Arrival and departure dates are indicated but please note
                that these dates may vary annually.
              </p>
              <p>
                As with any property related sale, upon purchasing the holiday
                of your choice, there will be a transfer fee payable for the
                change of ownership. This fee will depend on the relevant resort
                or managing agent.
              </p>
            </div>
          </div>

          <div class="row mb-4">
            <div class="col-md-8">
              <div class="accordion" id="accordionExample">
                <div class="card" v-for="(region, r) in detailedRegion" :key="r">
                  <a
                    class="btn btn-b-n"
                    type="button"
                    data-toggle="collapse"
                    :data-target="'#collapse' + region.id"
                    aria-expanded="false"
                    :aria-controls="'collapse' + region.id"
                  >
                    <div :id="'header' + region.id">
                      <h5 class="mb-0">{{ region.regionName }}</h5>
                    </div>
                  </a>
                  <div
                    :id="'collapse' + region.id"
                    class="collapse"
                    :aria-labelledby="'header' + region.id"
                    data-parent="#accordionExample"
                  >
                    <div class="card-body">
                      <p class="mb-0" v-for="(resort, i) in region.resorts" :key="i">
                        <a
                          class="text-capitalize"
                          @click="routerGoTo('/resort/' + resort.resortCode)"
                        >{{resort.resortName}}</a>
                        <br />
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'TimeshareToBuy',
  mounted() {
    this.getRegions();
  },
  computed: {
    ...mapState('timeshareBuy', ['detailedRegion']),
  },
  methods: {
    ...mapActions('timeshareBuy', ['getRegions']),
    routerGoTo(goTo) {
      this.$router.push(goTo);
    },
  },
};
</script>