I am encountering an issue with the reactivity of two components, namely line-chart and bar-chart.
When I modify the checkbox value linked to v-model="formChart.type", the components line-chart and bar-chart are automatically re-rendered.
However, when I click on the button that triggers the functions submitForm, generateChart(), and resetTypeChart(), those components do not re-render.
The mounted() function is not being called.
I am puzzled as to why this is happening despite resetting both the type and show. I have tried using Vue.set but it did not make any difference.
The code does reach the resetTypeChart() function.
Inconsistency in Component Rendering
<div class="chart-container">
<line-chart v-if="formChart.type === 'line_chart' && formChart.show" :chartData="dataChart" ref="lineChart"></line-chart>
<bar-chart v-if="formChart.type === 'bar_chart' && formChart.show" :chartData="dataChart" ref="barChart"></bar-chart>
</div>
Checkbox for Changing Chart Type
<el-radio-group size="small" v-model="formChart.type">
<el-radio-button label="line_chart"> Line Chart </el-radio-button>
<el-radio-button label="bar_chart"> Bar Chart </el-radio-button>
</el-radio-group>
Button to Generate Chart
<el-button type="primary" size="large"@click="submitForm('formChart')">Generate</el-button>
submitForm(formName) {
this.$refs[formName].validate((valid) => {
this.generateChart();
this.resetTypeChart();
}
});
Function for Resetting the Chart (Attempt)
resetTypeChart () {
const saveType = this.formChart.type;
this.formChart.type = '';
this.formChart.show = false;
Vue.set(this.formChart, 'type', saveType);
this.formChart.type = saveType;
this.formChart.show = true;
}
JSFIDDLE
- Selecting
Bar Chartgenerates the component. - Clicking on
Generatewhile staying on the same radio button results in nothing shown.