在Vue 2.7中，出现了一个类型错误,方法不能在"data"选项中被调用,

vaqhlq81 于 5个月前发布在其他

关注(0)|答案(5)|浏览(58)

版本

2.7.14

复现链接

github.com

复现步骤

运行 pnpm install(或使用 npm, yarn)
运行 pnpm type-check(实际命令为 vue-tsc --noEmit)

预期结果

无错误

实际发生情况

报告了错误：在选项 methods 中找不到方法 data

src/main.ts:6:19 - error TS2339: Property 'method1' does not exist on type 'CreateComponentPublicInstance<{}, {}, {}, {}, {}, ComponentOptionsMixin,
 ComponentOptionsMixin, {}, {}, {}, false, OptionTypesType<{}, {}, {}, {}, {}, {}>, {}, {}, {}, {}, {}, {}>'.

6       data1: this.method1(),
                    ~~~~~~~

仓库中的主代码为：

defineComponent({
  data() {
    return {
      data1: this.method1(),
    }
  },
  methods: {
    method1(): number {
      return 1
    }
  }
})

vue

来源：https://github.com/vuejs/vue/issues/12944

5条答案

按热度按时间

fnvucqvd1#

赞(0）回复(0）举报 5个月前

igsr9ssn2#

这可能是计算引用其他计算属性需要显式类型注解的问题。你试过这个吗：

defineComponent({
  data(): { data1: number } {
    return {
      data1: this.method1(),
    }
  },
  methods: {
    method1(): number {
      return 1
    }
  }
})

赞(0）回复(0）举报 5个月前

sf6xfgos3#

我刚刚尝试了，问题仍然存在。

赞(0）回复(0）举报 5个月前

bcs8qyzn4#

非法使用
对象必须是普通的：原生对象，如浏览器API对象和原型属性将被忽略。

赞(0）回复(0）举报 5个月前

7gcisfzg5#

如果在 data 选项之前将 methods 选项移动，错误将会消失。
TS Playground链接及相关代码

defineComponent({
 methods: {
    foo(): number {
      return 1
    }
  },
  data() {
    return {
      data1: this.foo(),
    }
  },
})

这是由于TypeScript的推断顺序造成的。
这个限制在Vue3中仍然存在，但data上下文的其余键在Vue3中被推断为Function。
与microsoft/TypeScript#52849相关

赞(0）回复(0）举报 5个月前

我来回答

在Vue 2.7中，出现了一个类型错误,方法不能在"data"选项中被调用,

版本

复现链接

复现步骤

预期结果

实际发生情况

5条答案

相关问题

热门标签

最新问答