从方法访问 vue 组件中的数据答案

【问题标题】：Accessing data in a vue component from methods从方法访问 vue 组件中的数据
【发布时间】：2018-11-03 11:39:00
【问题描述】：

我目前在正确上下文的 VueJs 组件中使用“this”时遇到问题。我已经阅读了很多答案，主要是指不使用箭头函数。正如您在我附加的代码块中看到的那样，我已经用常规的箭头函数替换了箭头函数，嗯......上下文现在不同了，但是关于错误消息

“TS2339：属性 'answer1' 在类型 '{ receiveValues(value1: string, value2: string): void; test(): string; }' 上不存在。”

上下文现在是方法对象。我现在在这个问题上浪费了很多时间，我真的不知道该怎么办。所以我的问题是，我怎样才能获得正确的上下文来访问数据？我感谢每一个帮助和提示！我将 ts 编译器与 ES2015 一起使用。

代码：

export default {
name: 'app',
components: {
  Editor,
  Chart,
},
methods: {
  receiveValues(value1: string, value2: string) {
    console.log(value1); 
    this.answer1 = value1; // This is where the error is thrown
    console.log('receiveValues ' + this.test()); // this works just fine
  },
  test() {
    console.log('blablabla');
    return 'did it';
  },
},
data() {
  return {
    content: 'I\'m Test Content!',
    answer1: '',
    answer2: '',
    answer3: '',
    answer4: '',
  };
},

与this post 不同，例如，我的“this”上下文仅引用方法对象，因此我只能调用其函数，而不能调用来自组件本身的数据。

【问题讨论】：

What is Vue way to access to data from methods?的可能重复
感谢您链接这篇文章。作者能够在组件上下文中使用“this”。我的问题是，“this”的上下文仅指方法对象。
你试过访问this.$data.answer1吗？
是的，我刚试过一分钟。 "TS2339: 属性 '$data' 在类型 '{ receiveValues(value1: string, value2: string): void; test(): string; }' 上不存在。"
你是使用 Vue.extend 还是组件生成器在 Typescript 中声明你的组件？看起来你只是在不正确的 Vue 组件中使用像 javascript 中的普通对象。

标签： typescript vue.js ecmascript-6 components

【解决方案1】：

如果你在 vuejs 中遇到 ts2339 错误，同时使用 typescript 和基于对象的方式：

export default{}

检查以下步骤：

首先你应该将 lang 设置为 "ts
接下来你应该导入 vue

import Vue from "vue";
使用 export default Vue.extend 代替 export default

export default Vue.extend({ name: "app" as string, })
检查您是否在此组件中使用了任何基于普通旧对象的 mixin，如果您尝试上面的步骤（2,3），它将解决问题。（考虑您的 mixin.js 应该更改为 mixin.ts 以作为有效的打字稿文件）

【讨论】：

【解决方案2】：

Max Sinev 对一个答案的评论确实帮助了我，但可能很容易被其他人忽略，所以我重新发布：

你是否使用 Vue.extend 或组件生成器在 Typescript 中声明你的组件？看起来你只是在不正确的 Vue 组件中使用像 javascript 中的普通对象

我不小心使用了一个普通的对象，并且看到了各种各样的问题。更改为Vue.extend({}) 将所有内容整理好。

【讨论】：

【解决方案3】：

致所有和我有同样问题的人：我仍然不知道为什么我无法使用“this”访问正确的上下文，但我找到了一个适合我的解决方案：

我对来自Vue Class Component 的类文件使用了打字稿装饰器，现在它可以工作了！在我看来，代码更容易编写和清洁！感谢@Michał Perłakowski 和@Max Sinev 的帮助。

【讨论】：