UnivateProperties/src/components/property/propertyList.vue

<template>
  <!-- eslint-disable max-len -->
  <div>
    <div class="container">
      <section class="intro-single">
        <div class="container">
          <div class="row">
            <div class="col-md-12 col-lg-8">
              <div class="title-single-box">
                <h1 v-if="user !== 'All'" class="title-single">My {{ propertyType }} Properties</h1>
                <h1 v-else class="title-single">All {{ propertyType }} Properties</h1>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="container">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Name</th>
            <th>Property ID</th>
            <th>Size</th>
            <th>Price</th>
            <th>Type</th>
            <th>Publish</th>
            <th>Status</th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in properties" :key="i">
            <td>{{ item.name }}</td>
            <td>{{ item.id }}</td>
            <td v-html="item.size" />
            <td>{{ item.price }}</td>
            <td>{{ item.type }}</td>
            <td>{{ item.publish }}</td>
            <td>{{ item.status }}</td>
            <td>
              <button
                type="button"
                @click="Edit(item)"
                class="btn btn-b-n"
                style="width: 85px; height:40px;"
              >Edit</button>
            </td>
            <td>
              <button type="button" class="btn btn-b-n" style="width: 85px; height:40px;">Delete</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

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

export default {
  name: 'PropertyList',
  data() {
    return {
      propertyType: '',
      user: '',
    };
  },
  methods: {
    ...mapActions('propertyList', ['getProperties']),
    Edit(item) {
      const salesType = item.isSale ? 'Sale' : 'Rental';
      this.$router.push({
        path: `/property/${this.propertyType}/${salesType}`,
        query: { id: item.id },
      });
    },
  },
  mounted() {
    this.propertyType = this.$route.params.propertyType;
    this.user = this.$route.params.user;

    if (this.user === 'MyListings') {
      this.user = 'GeorgeW';
    }

    this.getProperties(
      Object.assign(
        {},
        {
          propertyType: this.propertyType,
          user: this.user,
        },
      ),
    );
  },
  computed: {
    ...mapState('propertyList', ['properties']),
    TypeChanged() {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.propertyType = this.$route.params.propertyType;
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.user = this.$route.params.user;
      this.getProperties(
        Object.assign(
          {},
          {
            propertyType: this.$route.params.propertyType,
            user: this.$route.params.user,
          },
        ),
      );
      return this.propertyType;
    },
  },
  watch: {
    TypeChanged() {
      console.log(this.propertyType);
    },
  },
};
</script>