typescript - 当单击商店中的数据时，我想要一个进度条来更改更新值

Question

单击条形图元素时，我遇到了更新条形图的问题。数据在 vuex 存储中。

所以我想当一个元素被点击时，条形图更新为altValue

在我的代码中，我试图使用名称值来访问存储模块中的数据对象

任何解释或帮助将不胜感激，我是 TS 和 Vue 的新手，谢谢。

<template>
    <div class="top-condition-set" data-testid="top-condition-set">
        <p>
            <i class="mr-2 fa" :class="conditionSet.icon" />
            <strong>{{ conditionSet.name }}</strong>
        </p>

        <v-progress-linear
            v-for="(cond, i) in sortedConditions"
            :key="i"
            class="top-condition"
            color="blue"
            height="30"
            :value="cond.values.altValue[setSelectedTopCondition] || cond.values.totalDeliveryPercentage"
            @click="barClicked(cond.values.value)"
        >
            <span class="condition-stat">{{ cond.name }} : {{ cond.values.totalDeliveryPercentage }} %</span>
        </v-progress-linear>
    </div>
</template>
<script lang="ts">
    import Vue from "vue";
    import Component from "vue-class-component";
    import { Prop } from "vue-property-decorator";

    import { modules, Mutation, State } from "@store/index";

    @Component({})
    export default class TopConditionSetPresenter extends Vue {
        // Once working refactor and put logic and mutations etc into the container - Ask about the sort function as was here already
        @State((state) => state.analytics.setSelectedTopCondition)
        readonly setSelectedTopCondition: string;

        @Mutation("analytics/SET_SELECTED_TOP_CONDITIONS_VALUE")
        setSelectedTopCondition: Mutation<typeof modules.analytics.mutations.SET_SELECTED_TOP_CONDITIONS_VALUE>;

        @Prop({
            default: () => {
                return {};
            },
            type: Object,
        })
        conditionSet: {
            name: string;
            icon: string;
            conditions: {
                name: string;
                values: {
                    total: number;
                    totalDeliveryPercentage: number;
                    android: number;
                    ios: number;
                    desktop: number;
                    car: number;
                    tablet: number;
                };
            }[];
        };

        get sortedConditions(): {
            name: string;
            values: {
                total: number;
                totalDeliveryPercentage: number;
                android: number;
                ios: number;
                desktop: number;
                car: number;
                tablet: number;
            };
        }[] {
            return this.conditionSet.conditions.sort(
                (a, b) => b.values.totalDeliveryPercentage - a.values.totalDeliveryPercentage
            );
        }

        barClicked(index: string): void {
            // this.setSelectedTopCondition({ value = index });
            console.log(index);
        }
    }
</script>

存储模块

export interface AnalyticsState {
    setSelectedTopCondition: string;
    topConditionsStats: ImpressionDataTopConditions[];
}

export interface ImpressionDataTopConditions {
    name: string;
    icon: string;
    conditions: TopConditionsData[];
}

interface TopConditionsData {
    name: string;
    values: TopConditionValues;
}


export interface TopConditionValues {
    value: string;
    altValue: AltCondtionsValue;
    total: number;
    totalDeliveryPercentage: number;
}

interface AltCondtionsValue {
    android: number;
    sun: number;
}

const defaultState: AnalyticsState = {
   
    setSelectedTopCondition: null,
    topConditionsStats: [
        {
            name: "Weather",
            icon: "fa-sun-o",
            conditions: [
                {
                    name: "Sun",
                    values: {
                        value: "sun",
                        altValue: { android: 5, sun: null },
                        total: 1000000,
                        totalDeliveryPercentage: 25.8,
                    },
                },
                {
                    name: "Rain",
                    values: {
                        value: "rain",
                        altValue: { android: 10, sun: null },
                        total: 500000,
                        totalDeliveryPercentage: 12.9,
                    },
                },
                {
                    name: "Snow",
                    values: {
                        value: "snow",
                        altValue: { android: 15, sun: null },
                        total: 32423,
                        totalDeliveryPercentage: 0.8,
                    },
                },
                {
                    name: "Cloud",
                    values: {
                        value: "cloud",
                        altValue: { android: 50, sun: null },
                        total: 2345345,
                        totalDeliveryPercentage: 60.5,
                    },
                },
            ],
        },
        {
            name: "Device Type",
            icon: "fa-map-marker",
            conditions: [
                {
                    name: "Android",
                    values: {
                        value: "android",
                        altValue: { sun: 10, android: null },
                        total: 1000000,
                        totalDeliveryPercentage: 25.8,
                    },
                },
                {
                    name: "IOS",
                    values: {
                        value: "ios",
                        altValue: { sun: 17, android: null },
                        total: 500000,
                        totalDeliveryPercentage: 12.9,
                    },
                },
                {
                    name: "Desktop",
                    values: {
                        value: "desktop",
                        altValue: { sun: 43, android: null },
                        total: 32423,
                        totalDeliveryPercentage: 0.8,
                    },
                },
                {
                    name: "Tablet",
                    values: {
                        value: "tablet",
                        altValue: { sun: 50, android: null },
                        total: 2345345,
                        totalDeliveryPercentage: 60.5,
                    },
                },
            ],
        },
    ],
};