在运行时更改元素道具

Question

我有一个图表组件，我的工作是制作一个按钮来更改它的类型（例如，将列转换为饼图），但我不知道如何在按钮单击事件上更改它。 这是组件的结构（想法是在按下具有ChangeType id的按钮时更改：series-defaults-type）

<template>
    <div style="width: 100%;overflow: overlay;border-radius: 20px;">
        <button id="changeType" @click="changeType()">Change</button>
        <chart-more-option :kpiName="'EquipmentRetirementForecast'" v-if="showMoreOptions"/>
       <chart :title-text="'Equipment Retirement Forecast'"
              :title-color="'#FFF'"
              :title-font="'openSans'"
              :chart-area-background="'#1B1534'"
              :legend-visible="false"
              :series-defaults-type= "'column'"
              :series="series"
              :category-axis="categoryAxis"
              :axis-defaults-color="'#FFF'"
              :axis-defaults-labels-rotation-angle="'30'"
              :value-axis="valueAxis"
              :tooltip="tooltip"
              :theme="'sass'"
              :zoomable-mousewheel="true">
        </chart>
    </div>
</template>

<script>
import { Chart } from '@progress/kendo-charts-vue-wrapper';
import ChartMoreOption from '../ChartMoreOption';

export default {
    name: 'EquipmentRetirementForecast',
    components: {
        'chart': Chart,
        ChartMoreOption
        
    },
    props:  {
        fetchData: {
            type: Boolean,
            default: false
        },
        showMoreOptions: {
            type: Boolean,
            default: true,
        },
    },
    watch: {
      labelAlign(){
        var c = this.$refs.chart
        c.updateWidget();
      }
    },
    computed:{
        requestBody(){
            return this.$store.getters['usersession/getTopologyRequestBody']
        },
        series(){            
            return this.$store.getters['riskmanagement/getRetirementForecastSeries']
        },
        categoryAxis(){            
            return this.$store.getters['riskmanagement/getRetirementForecastCategoryAxis']
        },
    },
    data: function() {
        return {
            valueAxis: [{
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: true
                },
                labels: {
                    rotation: "auto"
                }
            }],

            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #",
            },

        }
    },
    mounted(){   
        if(this.fetchData){     
            this.$store.dispatch("riskmanagement/FetchRetirementForecastData",this.requestBody).then(()=>{

            });
        }
    },
    methods: {
        changeType(){
            //code goes here
        }
    }
}
</script>
<style src="../style-dashboard.scss" lang="scss" scoped />

这是我需要更改的图表：

手动将:series-defaults-type更改为 pie，它可以工作，但我需要通过单击按钮进行更改，如下所示：

Answer 1

添加一个data属性并将其默认为“列”，例如将其命名为chartType 。 然后在changeType()中添加this.chartType = 'pie' 。 并将:series-defaults-type= "'column'"更改为:series-defaults-type= "chartType" 。

还要记住不要使用:用于硬编码的属性值。 所以:chart-area-background="'#1B1534'"应该是chart-area-background="#1B1534" 。