UnivateProperties/src/components/admin/fees/listingFee.vue

<template>
  <section id="content">
    <label for="fee" class="uniLabel">LISTING FEE</label>
    <currency-input
      onClick="this.setSelectionRange(0, this.value.length)"
      name="fee"
      :value="value"
      @input="value = $event"
      v-model="fee"
      id="price"
      class="form-control uniInput"
    />
    <button @click="saveListingFee" class="btn-solid-blue mt-4">Save</button>
  </section>
</template>

<script>
/* eslint-disable */
import { mapActions, mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      fee: 0.0
    };
  },
  mounted() {
    this.pullListingFee();
  },
  methods: {
    ...mapActions("fees", ["retrieveListingFee", "setListingFee"]),
    saveListingFee() {
      var feeObj = {
        amount: parseFloat(this.fee),
        name: "Listing Fee"
      };

      this.setListingFee(feeObj);
    },
    async pullListingFee() {
      await this.retrieveListingFee();
      console.log(this.getListingFee);

      this.fee = this.getListingFee.amount;
    }
  },
  computed: {
    ...mapGetters("fees", ["getListingFee"]),
    ...mapState("fees", ["listingFee"])
  }
};
</script>

<style lang="scss" scoped></style>