How can I bind radio button to component app?

Question

I'm using radio buttons to select Month & Year. But I'm not sure how to bind the selection of the button to display which chart i'd like to show.

//template

            <b-form-radio-group class="mr-3" id="radiosBtn" buttons button-variant="outline-secondary" v-model="selected" name="radiosBtn" :options="options"></b-form-radio-group>

      </b-button-toolbar>
    </b-col>
  </b-row>
  <main-chart-example id='Month' chartId="main-chart-01" class="chart-wrapper Month" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
  <main-chart-example2 id='Year' chartId="main-chart-02" class="chart-wrapper Year" style="height:300px;margin-top:40px;" height="300"></main-chart-example2>

//

data: function () {
return {
  selected: 'Month',
    options: [
        { text: 'Month', value: 'Month' },
        { text: 'Year', value: 'Year' }
    ],

Answer 1

You can add v-if directive to charts. So your chats will be like:

<main-chart-example
    v-if="this.selected === 'Month'"
    id='Month' 
    chartId="main-chart-01" 
    class="chart-wrapper Month" 
    style="height:300px;margin-top:40px;" 
    height="300">
</main-chart-example>
<main-chart-example2 
    v-if="this.selected === 'Year'"
    id='Year' 
    chartId="main-chart-02" 
    class="chart-wrapper Year" 
    style="height:300px;margin-top:40px;" 
    height="300">
</main-chart-example2>