如何在 Nuxt 数据中进行基本计算()

Question

我的 Nuxt 应用程序中的

data()

中有一系列对象，设置如下。

myObjects: [
    {
        firstNumber: 2,
        secondNumber: 3,
        thirdNumber: this.firstNumber * this.secondNumber
    }
]

正如您从上面看到的那样，我正在尝试将

firstNumber

乘以

secondNumber

以获得

thirdNumber

，我将在屏幕上向应用程序的用户显示。

不幸的是

thirdNumber

在前端显示为NaN。我本来希望

thirdNumber

在前端显示为6.

我试图通过将

thirdNumber

更改为

thirdNumber: Number(this.firstNumber) * Number(this.secondNumber)

来强制键入，但结果是一样的。我已经尝试了其他一些类似的变体，但结果总是一样的......NaN.

这看起来应该相当简单，所以我不知道我做错了什么。

编辑：

为了进一步提供帮助，这里是代码的一个稍微扩展的版本。

<!-- HTML -->

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

<!-- DATA -->

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

Answer 1

创建计算属性的正确方式，就像这样

computed: {
    thirdNumber() {
      return this.myObjects[0].firstNumber * this.myObjects[0].secondNumber;
    },
  },

并在模板上使用 {{ thirdNumber }}