Как отобразить выбор пользователей из v-modal

Question

Выбор сумм (скриншот для вопроса) Я пытаюсь показать свои выборы через мои модалы, поэтому, например, когда я нажимаю сумму, я хочу, чтобы она скрыла модал, а также показывалась на главной странице. на странице того, что я выбрал (вы увидите, что модальное поле пустое, потому что оно будет заполнено тем, что выбрал пользователь). Я пробовал v-модель и :key, но я немного запутался в этом вопросе и мне интересно, правильно ли я его использую. Как вы увидите, я попробовал :key. Он закрывается, когда я нажимаю кнопку ОК и кнопку выхода, но не показывает мой выбор. «Собственная сумма» открывает второй модальный режим, который требует от пользователя ввода суммы, а при нажатии кнопки «ОК» она должна отображаться на главной странице.

 <!--Purchase Modal-->
    <div>
      <center>
        <b-button
          id="modalButtons"
          v-b-modal.modal-multi-1
          style="font-size:x-large; font-weight:bold;"
        >
          <div v-if="amountSubmitted.length === 0"></div>
          <div v-for="amount in amountSubmitted" :key="amount.amountSubmitted">
            {{ amount }}
          </div>
          <p style="color:grey; font-weight:normal;font-size:20px;">
            <i>This was your last purchase</i>
          </p></b-button
        >

        <b-modal
          id="modal-multi-1"
          ref="my-modal"
          size="lg"
          hide-footer
          title="Purchase Amount"
          ok-only
          no-stacking
        >
          <div v-if="user.meters">
            <div v-for="meter in user.meters" :key="meter.meterNumber">
              <b-button
                id="modalSubButtons"
                v-model="selected"
                @click="selectedOption"
              >
                <h3 style="font-size:x-large; font-weight:bold; float:left">
                  R{{ meter.lastAmount }}
                </h3>

                <br />
                <p
                  style="color:grey; font-weight:normal;font-size:20px;float:left"
                >
                  <i>This was your last purchase</i>
                </p></b-button
              >

              <br />
              <br />
              <b-button id="modalSubButtons">
                <h3 style="font-size:x-large; font-weight:bold; float:left">
                  R{{ meter.minimumPurchase }}
                </h3>
                <br />
                <p
                  style="color:grey; font-weight:normal;font-size:20px;float:left"
                >
                  <i>Minimum purchase amount</i>
                </p>
              </b-button>

              <br />
              <br />

              <b-button id="modalSubButtons">
                <h3 style="font-size:x-large; font-weight:bold; float:left">
                  R{{ meter.maximumPurchase }}
                </h3>
                <br />
                <p
                  style="color:grey; font-weight:normal;font-size:20px;float:left"
                >
                  <i>Maximum purchase amount</i>
                </p>
              </b-button>
            </div>
          </div>
          <b-button
            id="ownAmountbtn"
            v-b-modal.modal-multi-2
            style="font-weight: bold;
            font-size: x-large;"
            >Own Amount
            <p style="color:grey; font-weight:normal;font-size:20px;">
              <i>Enter your preferred amount to purchase</i>
            </p></b-button
          >
        </b-modal>

        <b-modal
          id="modal-multi-2"
          title="Own Amount"
          ok-only
          @ok="handleOk"
          @show="resetModal"
        >
          <p
            class="my-2"
            style="color:black; font-weight:normal;font-size:20px;"
          >
            Specify Amount you would like to purchase
          </p>
          <center>
            <input type="text" placeholder="R" />
          </center>
        </b-modal>
      </center>
    </div>
    <br />
    <center>
      <p style="color:grey"><i>How much would you like to pay?</i></p>
    </center>
    <br />


<!--And this is the JS file im using-->


export default {
  name: "BuyAToken",
  components: {},
  data() {
    return {
      user: {},
      selectedMeter: null,
      amount: "",
      amountSubmitted: []
    };
  },

  computed: {},
  created() {},
  mounted() {
    // resolve an async promise
    this.$services.userService.getUser().then(data => {
      this.user = data;
    });
  },
  methods: {
    nextPageToHome() {
      this.$router.push({
        path: "/Home"
      });
    },

    nextPageToMeters() {
      this.$router.push({
        path: "/Meters"
      });
    },
    selectMeter(meter) {
      this.selectedMeter = meter;
    },
    showModal() {
      this.$refs["my-modal"].show();
    },
    showPurchaseModal() {
      this.$refs["purchase-modal"].show();
    },
    showPaymentModal() {
      this.$refs["payment-modal"].show();
    },
    hideModal() {
      this.$refs["my-modal"].hide();
    },
    purchaseClick() {
      this.$router.push({
        path: "/BuyComplete"
      });
    },
    exitPage() {
      this.$router.push({
        path: "/Home"
      });
    },
    selectedOption() {
      this.$refs["my-modal"].hide();
    },
    resetModal() {
      this.amount = "";
    },
    handleOk() {
      this.handleSubmit();
    },
    handleSubmit() {
      this.amountSubmitted.push(this.amount);
      this.$nextTick(() => {
        this.$refs["my-modal"].hide();
      });
    }
  }
};