individual on tosell page

src/components/timeshare/sell/sellPage.vue

               :type="'WARNING'"
             />
           </div>
+          {{indiv}}
           <hr />
           <br />
           <div class="form-group row">
                 </div>
               </div>
             </div>
-
             <DetailIndividual :currentUser="sellItem.owner" :showBank="true" />
             <hr />
           </div>
       'agencies',
       'agents',
     ]),
-    ...mapState('individual', ['item']),
+    ...mapState('individual', ['indiv']),
     ...mapState('authentication', ['isLoggedIn']),
     ...mapGetters({
       user: 'authentication/getUser',

src/components/user/selectIndividual.vue

+<template>
+  <div>
+    <div class="row">
+      <div class="col-md-8">
+        <label>Region *</label>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>R</b>
+            </span>
+          </div>
+          <select class="form-control" @change="onChange()" v-model="selectedItem">
+            <option
+              v-for="(item, i) in items"
+              :key="i"
+              :value="item"
+            >{{item.name + ' ' + item.surname}}</option>
+          </select>
+        </div>
+      </div>
+      <div class="col-md-4">
+        <div class="btn btn-b-n btn-lg" style="margin-top:10px;" @click="onNew()">New</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'SelectIndividual',
+  data() {
+    return { selectedItem: {} };
+  },
+  props: {
+    currentUser: undefined,
+  },
+  mounted() {
+    this.getAllIndividuals();
+    this.selectedItem = this.indiv;
+    this.$emit('onSelectedItemItemChange', this.selectedItem);
+  },
+  computed: {
+    ...mapState('individual', ['items', 'indiv']),
+  },
+  methods: {
+    ...mapActions('individual', ['getAllIndividuals']),
+    onChange() {
+      this.$emit('onSelectedItemItemChange', this.selectedItem);
+    },
+    onNew() {
+      this.selectedItem = {};
+      this.$emit('onSelectedItemItemChange', this.selectedItem);
+    },
+  },
+};
+</script>

src/components/user/timeshareIndividual.vue

       <div class="myWell">
         <h4>Detailed Individual Information</h4>
       </div>
+      <SelectIndividual @onSelectedItemItemChange="onSelectedItemItemChange" />
       <div class="row" style="text-align:left">
         <div class="col-md-6">
           <label>Name *</label>
 import { mapState, mapGetters, mapActions } from 'vuex';
 import BankAccount from '../shared/bankAccount.vue';
 import Address from '../misc/address.vue';
+import SelectIndividual from './selectIndividual.vue';
 
 export default {
   components: {
     BankAccount,
     Address,
+    SelectIndividual,
+  },
+  data() {
+    return {
+      currentUser: {
+        name: undefined,
+        surname: undefined,
+        idNumber: undefined,
+        companyRegNumber: undefined,
+        emailAddress: undefined,
+        cellNumber: undefined,
+        landlineNumber: undefined,
+        bankingDetails: {},
+        address: {},
+      },
+    };
   },
   props: {
-    currentUser: {
-      name: undefined,
-      surname: undefined,
-      idNumber: undefined,
-      companyRegNumber: undefined,
-      emailAddress: undefined,
-      cellNumber: undefined,
-      landlineNumber: undefined,
-      bankingDetails: {},
-      address: {},
-    },
     showChangeCurrentUser: {
       default: false,
     },
       default: false,
     },
   },
-  mounted() {
-    if (!this.currentUser) {
-      if (this.user) {
-        this.getIndividual(this.user.id);
-      }
-    }
-  },
   computed: {
     ...mapState('timeshare', ['maritalStatus']),
     ...mapGetters({
   },
   methods: {
     ...mapActions('individual', ['getIndividual']),
+    onSelectedItemItemChange(item) {
+      this.currentUser = item;
+    },
   },
 };
 </script>

src/store/modules/user/individual.js

   },
   getters: {},
   actions: {
-    getIndividual({ commit, rootGetters }, userId) {
+    getIndividual({
+      commit,
+      rootGetters,
+    }, userId) {
       let id = 0;
       if (!userId || userId === 0) {
         const rootItem = rootGetters['authentication/getUser'];
       axios
         .get(`/api/individual/getIndividual/${id}`)
         .then(r => commit('setItem', {
-            name: 'indiv',
-            value: r.data,
-          }),)
+          name: 'indiv',
+          value: r.data,
+        }))
         .catch(console.error);
     },
+    getAllIndividuals({
+      commit,
+    }) {
+      axios.get('/api/individual/getAllIndividuals').then(x => commit('setItem', {
+        name: 'items',
+        value: x.data,
+      })).catch(console.error);
+    },
   },
 };