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

Posted 2023-02-23

【中文标题】从方法访问 vue 组件中的数据

【英文标题】：Accessing data in a vue component from methods

【发布时间】：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 中的普通对象。

【参考方案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 的帮助。