UnivateProperties/src/components/user/updateProfileInfo.vue

<template>
  <!-- eslint-disable max-len -->
  <div class="container">
    <br />
    <div class="title-box-d">
      <h1 class="title-d" style="text-align:left; font-size: 250%">Update Profile Info</h1>
    </div>
    <div class="row mb-4">
      <div class="container col-md-10">
        <form
          id="mainForm"
          method="POST"
          action="/to-sell"
          accept-charset="UTF-8"
          enctype="multipart/form-data"
        >
          <div class="col-md-12" style="text-align:left"></div>
          <DetailIndividual :currentUser="sellItem.owner" :showBank="true" :showAddress="true" />
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import DetailIndividual from './timeshareIndividual.vue';

export default {
  name: 'UpdateInfo',
  data() {
    return { selectedItem: {} };
  },
  props: {},
  components: {
    DetailIndividual,
  },
  mounted() {
    this.selectedItem = this.currentUser;
  },
  computed: {
    ...mapState('timeshare', [
      'resorts',
      'regions',
      'detailedRegion',
      'seasons',
      'result',
      'resortBedrooms',
      'maxSleep',
      'bankedEntities',
      'sellItem',
      'agencies',
      'agents',
    ]),
    ...mapState('individual', ['indiv']),
    ...mapState('authentication', ['isLoggedIn']),
    ...mapGetters({
      user: 'authentication/getUser',
      person: 'authentication/getPerson',
    }),
    isLoggedIn() {
      return this.user && this.person;
    },
  },
  methods: {
    ...mapActions('individual', ['getIndividual']),
    onSelectedItemItemChange(item) {
      this.currentUser = item;
    },
  },
};
</script>
<style>
.myWell {
  width: 100%;
  background-color: #60cbeb;
  border-radius: 6px;
  padding: 5px;
  margin: 3px;
}
</style>