Vuetify表格中动态计算的Cpk值无法渲染问题求助

我正在渲染一个包含多组数据的表格，其中仅Cpk值需要手动计算获取，是唯一需要动态更新的字段。我尝试用计算属性实现Cpk的计算，但表格始终无法渲染出Cpk值。相关代码如下：

<template>
    <v-container>
        <v-data-table
            :headers="headers"
            :items="processes"
            class="elevation-1"
        >
            <template #[`item.cpk`]="{ item }">
                <v-chip
                    :color="getColor(item.cpk)"
                    dark
                >
                    {{ item.cpk }}
                </v-chip>
            </template>
        </v-data-table>
    </v-container>
</template>

<script>
import core from "../../api/repositories/core";

export default {
    name: "Dashboard",

    created() {
        this.minuendValues();
        this.subtrahendValues();
        console.log('Data')
    },

    data() {
        return {
            headers: [
                {
                    text: 'Process Name',
                    align: 'left',
                    sortable: false,
                    value: 'name'
                },
                {text: 'Part Number', value: 'partNumber'},
                {text: 'Operation Name', value: 'operationName'},
                {text: 'Data Collection Title', value: 'dataCollectionTitle'},
                {text: 'Cpk', value: 'cpk'}
            ],
            processes: [
                {
                    name: 'EXC RHAD',
                    partNumber: '770404',
                    operationName: 'RHAD Impregnation',
                    dataCollectionTitle: 'Wet Weight',
                    cpk: this.minuendCPK,
                },
                {
                    name: 'EXC RHAD',
                    partNumber: '770404',
                    operationName: 'RHAD Impregnation',
                    dataCollectionTitle: 'Dry Weight',
                    cpk: this.subtrahendCPK,
                },

            ],

            requestData: [],

            // CPK value variables
            minuendCPK: '',
            subtrahendCPK: ''
        }
    },
    computed: {
        minuendCpk() {
            return this.calculateCpk(776, 716, this.calculateDataAverage(this.requestData), this.calculateStandardDeviation(this.requestData));
        },
        subtrahendCpk() {
            return this.calculateCpk(776, 716, this.calculateDataAverage(this.requestData), this.calculateStandardDeviation(this.requestData));
        }
    },
    methods: {
        async minuendValues() {
            try {
                const {data} = await core.getMinuendValues();
                console.log(data);
                this.requestData = data;
                this.minuendCPK = this.minuendCpk;

            } catch (e) {
                console.log("error: ", e);
            }
        },
        async subtrahendValues() {
            try {
                const {data} = await core.getSubtrahendValues();
                console.log(data);
                this.requestData = data;
                this.subtrahendCPK = this.subtrahendCpk;
            } catch (e) {
                console.log("error: ", e);
            }
        },

        calculateDataAverage(data) {
            const mean = (data.reduce((acc, obj) => acc + parseInt(obj.DataCollectionValue), 0) /  data.length).toFixed(2);


            return mean;
        },

        calculateStandardDeviation(data) {
            const mean = this.calculateDataAverage(data);

            const variance = data.reduce((acc, obj) => acc + Math.pow(parseInt(obj.DataCollectionValue) - mean, 2), 0) / data.length;

            const stdDev = Math.sqrt(variance).toFixed(2);

            return stdDev;
        },

        // Process capability rules
        calculateCpk(usl, lsl, mean, standardDeviation) {
            let tempX;
            let tempY;
            tempX = (usl - mean) / (3 * standardDeviation);
            tempY = (mean - lsl) / (3 * standardDeviation);

            return Math.min(tempX, tempY).toFixed(2);
        },

        getColor(cpk) {
            if (cpk > 1.33) {
                return 'green';
            }
            else if (cpk >= 1 && cpk <= 1.329) {
                return 'orange';
            }
            else {
                return 'red';
            }
        },

    }
}
</script>

<style scoped>

</style>

问题原因 #

1. processes无响应式关联：初始化时cpk字段仅一次性赋值了空字符串，后续minuendCPK/subtrahendCPK更新时，processes内的对象不会同步变化。
2. 请求数据互相覆盖：两个异步方法共用requestData变量，后执行的请求会覆盖先请求的数据，导致Cpk计算逻辑混乱。
3. 空数据计算异常：异步请求完成前requestData为空数组，计算平均值/标准差会出现除以0的错误，导致Cpk结果无效。

修复方案 #

1. 拆分请求数据存储

将requestData拆分为两个变量，分别存储两组请求结果：

data() {
  return {
    // ...其他数据
    minuendData: [],
    subtrahendData: []
  }
}

2. 修改异步方法，分别存储数据

async minuendValues() {
  try {
    const {data} = await core.getMinuendValues();
    this.minuendData = data;
  } catch (e) {
    console.log("error: ", e);
  }
},
async subtrahendValues() {
  try {
    const {data} = await core.getSubtrahendValues();
    this.subtrahendData = data;
  } catch (e) {
    console.log("error: ", e);
  }
}

3. 调整计算属性，关联对应数据并处理空值

将processes改为计算属性，自动同步最新Cpk值：

computed: {
  minuendCpk() {
    if (!this.minuendData.length) return '';
    return this.calculateCpk(776, 716, this.calculateDataAverage(this.minuendData), this.calculateStandardDeviation(this.minuendData));
  },
  subtrahendCpk() {
    if (!this.subtrahendData.length) return '';
    return this.calculateCpk(776, 716, this.calculateDataAverage(this.subtrahendData), this.calculateStandardDeviation(this.subtrahendData));
  },
  processes() {
    return [
      {
        name: 'EXC RHAD',
        partNumber: '770404',
        operationName: 'RHAD Impregnation',
        dataCollectionTitle: 'Wet Weight',
        cpk: this.minuendCpk,
      },
      {
        name: 'EXC RHAD',
        partNumber: '770404',
        operationName: 'RHAD Impregnation',
        dataCollectionTitle: 'Dry Weight',
        cpk: this.subtrahendCpk,
      },
    ]
  }
}

4. 优化计算方法，避免空数组错误

calculateDataAverage(data) {
  if (!data.length) return 0;
  const sum = data.reduce((acc, obj) => acc + parseInt(obj.DataCollectionValue), 0);
  const mean = (sum / data.length).toFixed(2);
  return mean;
}

5. 完善颜色判断逻辑，处理空值

getColor(cpk) {
  if (!cpk) return 'gray';
  const cpkNum = parseFloat(cpk);
  if (cpkNum > 1.33) {
    return 'green';
  } else if (cpkNum >= 1 && cpkNum <= 1.329) {
    return 'orange';
  } else {
    return 'red';
  }
}

内容的提问来源于stack exchange，提问作者Broco