gist.vue

<template>
	<div>
        <div v-for="(option, i) in availableOptions" class="tw-w-full sm:tw-w-1/2 md:tw-w-1/2 lg:tw-w-1/3">
            <div class="tw-flex tw-justify-center">
              <input :id="option.id" type="radio" :value="option.value" v-model="finance_commitment" @click="next">
              <label :for="option.id">
                <p class="tw-px-3"><span v-html="option.title"></span></p>
              </label>
            </div>
      	</div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      availableOptions: [
        {
          id: 'financial_resources_set_aside',
          value: 'FINANCIAL_COMMITMENT_YES',
          title: "Yes, I do",
          onClickAction: 'next',
        },
        {
          id: 'get_financial_resources',
          value: 'FINANCIAL_COMMITMENT_NO_CAN_GET',
          title: "Yes, I can get them",
          onClickAction: 'next',
        },
        {
          id: 'no_financial_resources',
          value: 'FINANCIAL_COMMITMENT_NO',
          title: "No, I do not",
          onClickAction: 'notRight',
        },
      ],
      finance_commitment: null,
    }
  },
  methods: {
    next(e) {
      console.log('next');
      var finance_commitment = e.target.value;
      this.axios
        .post("course/finance-commitment", {
          finance_commitment: finance_commitment,
          session_id: this.$session.id()
        })
        .then(response => {
          // do something
        });
    },
    notRight() {
      console.log('notRight');
      this.$router.push("/join/course-not-right");
    }
  }
};
</script>
<style scoped>
</style>