Nuxt data()中对象数组计算thirdNumber显示NaN问题求助

你遇到的thirdNumber显示为NaN的核心问题是对象内部的this指向错误：在myObjects数组的单个对象中，this指向的是Vue组件实例，而非当前对象本身，因此this.firstNumber和this.secondNumber都取不到有效值，相乘后自然得到NaN。

以下是三种可行的修复方案，可根据你的业务场景选择：

方案1：直接初始化计算值（适合固定初始值场景） #

如果初始的firstNumber和secondNumber是固定值，直接手动计算好thirdNumber的结果赋值即可：

data() {
    return {
        myObjects: [
            {
                firstNumber: 2,
                secondNumber: 3,
                thirdNumber: 2 * 3
            },
            {
                firstNumber: 2,
                secondNumber: 3,
                thirdNumber: 2 * 3
            }
        ]
    }
}

方案2：用计算属性动态生成（推荐，支持数值更新） #

如果后续firstNumber或secondNumber可能被用户修改，使用计算属性动态计算thirdNumber是更合理的选择：

data() {
    return {
        myObjects: [
            { firstNumber: 2, secondNumber: 3 },
            { firstNumber: 2, secondNumber: 3 }
        ]
    }
},
computed: {
    computedObjects() {
        return this.myObjects.map(item => ({
            ...item,
            thirdNumber: item.firstNumber * item.secondNumber
        }))
    }
}

同时修改模板，遍历计算后的数组：

<div v-for="(item, index) in computedObjects" :key="index">
    <p v-text="item.firstNumber"></p>
    <p v-text="item.secondNumber"></p>
    <p v-text="item.thirdNumber"></p>
</div>

方案3：在created钩子中补全计算值 #

若不想使用计算属性，也可以在组件创建阶段手动遍历数组，补全thirdNumber的值：

data() {
    return {
        myObjects: [
            { firstNumber: 2, secondNumber: 3 },
            { firstNumber: 2, secondNumber: 3 }
        ]
    }
},
created() {
    this.myObjects.forEach(item => {
        item.thirdNumber = item.firstNumber * item.secondNumber
    })
}

模板保持原写法即可。

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