UnivateProperties/src/components/property/propertyCard.vue

<template>
  <div class="form-group row">
    <div class="col-md-4" v-for="currentProperty in properties" :key="currentProperty.id">
      <div class="card-box-a card-shadow">
        <div class="img-box-a">
          <img
            :src="currentProperty.displayImage"
            alt
            class="img-a img-fluid"
            style="height:466px; width:350px; object-fit: cover;"
          />
        </div>
        <div class="card-overlay">
          <div class="card-overlay-a-content">
            <div class="card-header-a">
              <h4 class="card-title-a">
                <router-link
                  :to="`/property/property/${currentProperty.id}`"
                  class="link-a"
                >{{ currentProperty.shortDescription }}</router-link>
              </h4>
              <h4 class="card-title-c">
                <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
                  {{ currentProperty.province }}
                  <br />
                  {{ currentProperty.city }}
                  <br />
                  {{ currentProperty.suburb }}
                </router-link>
              </h4>
            </div>
            <div class="card-body-a">
              <div class="price-box d-flex">
                <span
                  v-if="currentProperty.isSale"
                  class="price-a"
                >sale | {{ currentProperty.displayPrice }}</span>
                <span
                  v-if="!currentProperty.isSale"
                  class="price-a"
                >rent | {{ currentProperty.displayPrice }}</span>
              </div>
              <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
                Click here to view
                <span class="ion-ios-arrow-forward"></span>
              </router-link>
            </div>
            <div class="card-footer-a" v-if="currentProperty.showFooter">
              <ul class="card-info d-flex justify-content-around">
                <li v-if="currentProperty.area !== null">
                  <h4 class="card-info-title">Area</h4>
                  <span v-html="currentProperty.area"></span>
                </li>
                <li v-if="currentProperty.beds !== null">
                  <h4 class="card-info-title">Beds</h4>
                  <span>{{ currentProperty.beds }}</span>
                </li>
                <li v-if="currentProperty.baths !== null">
                  <h4 class="card-info-title">Baths</h4>
                  <span>{{ currentProperty.baths }}</span>
                </li>
                <li v-if="currentProperty.garages !== null">
                  <h4 class="card-info-title">Garages</h4>
                  <span>{{ currentProperty.garages }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <br />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    properties: Object,
  },
};
</script>