Vuejs- I want to get a simple button value so when it's clicked two radio buttons are shown

Question

I'm trying to do something, I don't know where to start. So basically it's a submit button if it's clicked I have to get two radio buttons shown to chose from one of them, when it's not only the submit button is present . for now I only have this code where all my buttons are shown with no condition cuz I don't know how or where to use it. Can u help me out please? I'm using Ant design vue for designing that's why I have a- attributes . here's the code:

<template>
   <a-button type="primary" class="mb-4 text-center  float-right ">Reject</a-button>  
    <a-button type="primary" class="mb-4 text-center mr-1 float-right" >Confirm</a-button>

   <a-radio-group name="radioGroup" class="float-right">
 <a-radio value="1">A</a-radio>
<a-radio value="2">B</a-radio>
      </a-radio-group>


  </template>

    <script>
     import { defineComponent, onMounted, reactive, ref, unref, toRaw } from 'vue'
      export default {
      name :'Okbutton',

      }
     </script>

Answer 1

A simple solution would be to add a v-if or v-show on your radio group and make a boolean to switch between showing them or not.

  <a-radio-group v-if="showRadio" name="radioGroup" class="float-right">
    <a-radio value="1">A</a-radio>
    <a-radio value="2">B</a-radio>
  </a-radio-group>

I have named the boolean showRadio in this example. You will need to create this boolean in your data or setup (depending on your structure). Whenever you want to show the radio button you just set showRadio to true.