twitter-bootstrap - 如何将单选按钮绑定到组件应用程序？

Question

我正在使用单选按钮来选择月份和年份。但我不确定如何绑定按钮的选择以显示我想显示的图表。

//模板

            <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

您可以向图表添加v-if指令。所以你的聊天会是这样的：

<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>