小编0x0*_*yte的帖子

Nuxt.js Typescript - 尝试访问计算属性中的数据对象时出错

我正在使用 options api,当尝试访问计算属性中的 Vue 数据对象的属性时,我在类型检查中收到错误。

Property 'quantity' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { item: unknown; total: unknown; menuItemCategories: any; }, Readonly<Record<never, any>>>'

该属性确实存在,因为页面能够使用计算属性正确加载和显示呈现的模板 - 只有类型检查器会抱怨。

组件代码(长度简化):

import Vue from "vue";
export default Vue.extend({
  data() {
    quantity: 1,
  },

  computed: {
    total() {
      return this.item.price * this.quantity;
    }
  },
});
Run Code Online (Sandbox Code Playgroud)

编辑

我已经能够通过使用该data属性作为对象来解决这个问题。

但这确实会产生一些问题,因为最佳实践是用作data返回对象的函数。同样的问题也适用于asyncData.

进一步的试验和错误表明我能够data通过该methods属性访问函数属性。但是,如果我使用mapGettersvuex 中的助手,它会抛出与计算属性相同的类型错误。

它们methods在计算属性内的类型中也不可用CombinedVueInstance

tsconfig.json

// tsconfig.json
{
  "compilerOptions": { …
Run Code Online (Sandbox Code Playgroud)

typescript vue.js vue-component nuxt.js

1
推荐指数
1
解决办法
6644
查看次数

标签 统计

nuxt.js ×1

typescript ×1

vue-component ×1

vue.js ×1