Как привязать переключатель к компонентному приложению? - PullRequest
Новая
       31

Как привязать переключатель к компонентному приложению?

0 голосов
/ 08 февраля 2019

Я использую переключатели, чтобы выбрать месяц и год.Но я не уверен, как связать выбор кнопки для отображения графика, который я хотел бы показать.

// 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' }
    ],

1 Ответ

0 голосов
/ 08 февраля 2019

Вы можете добавить директиву 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>
...