问题标签 [vue-class-components]

我正在使用 VUE 2.6.11 和类组件。我正在尝试将可以显示为模态的组件包装在将管理模态状态的组件中。

根据文档，我可以使用Scoped Slots在父组件中访问我的子道具/方法 由于某些原因，我的方法没有绑定到模板：

模态的.vue：

模板：

然后在我的父母中，我执行以下操作：

开发工具声称我的方法已绑定

但是当我在嵌套的模态内容中执行 prop 函数时：

我收到以下错误：

[Vue warn]: Property or method "toggleModal" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

和：

TypeError: this.toggleModal is not a function

我找到了这篇文章（实际上指向我在开始时提到的文档，但我看不出有什么区别会破坏我的代码

我正在开发一个组件，该组件在搜索栏中的文本发生更改时查询外部 API，并且我正在尝试对该查询进行去抖动，以便它只能每 2 秒执行一次。我正在尝试使用 lodash 的debounce功能来做到这一点，并且发现了多个博客文章和关于将它与 Vue 组件一起使用的 SO 问题，但是事情很复杂，因为我使用的是 Typescript 和 Vue 类组件语法（https://class-组件.vuejs.org /）。老实说，我对这两个都很陌生。

我发现一篇博客文章概述了如何使用基于对象的 Vue 组件语法来做到这一点，但它不适用于类组件语法。基于对象的语法允许您将方法包装在 a_.debounce中，如下所示：

有没有办法用 Vue 类组件语法做类似的事情？

以下是我的代码的相关部分（没有任何反跳尝试）：

我正在尝试使用 Laravel 后端编写 Vue SPA，同时还使用 Typescript 而不是 Raw Javascript。我想我很难把头绕在某些事情上，主要是围绕打字稿。显然我需要 Axios，所以我尝试导入它并将其绑定到我的 bootstrap.ts 文件中的窗口，类似于在 Laravel 的默认 bootstrap.js 文件中完成的方式。

资源/js/bootstrap.ts

然后将其导入我的 app.ts 文件，然后设置 Vue 路由器并导入组件。

资源/js/app.ts

但是，当我尝试在我的 Vue 组件中使用 axios 时，我得到了错误cannot find name 'axios'。当然，我也会收到与隐式任何类型相关的错误，但我知道我为什么会得到这些错误。当然，我也确实记得从 npm 安装 axios。

我将在此处发布 Register.vue 文件以供参考，但是在我想在其中使用 axios 的任何文件中都会遇到类似的错误。

资源/js/views/Register.vue

我在这里遗漏了一些明显的东西吗？以错误的方式解决这个问题？以下是一些可能与情况相关的其他杂项文件。

webpack.mix.js

tsconfig.json

资源/js/typings.d.ts

下面是带有事件监听器的 Vue 组件类，它可以在某个时间点接收服务工作者的实例并将其保存在registration属性下。

我遇到的问题是，即使这样做：

TypeScript 传达这this.registration是TS2571: Object is of type 'unknown'.有道理的，因为： private registration: unknown

如果有人能建议什么是初始化和访问稍后可以定义的属性的正确方法，我将不胜感激？

PS：实际的类型registration是ServiceWorkerRegistration

类实现：

tsconfig.json

我们有一个现有的 vue.js 2 项目，我们正在尝试通过运行命令 vue add typescript 在我们的项目中使用 typescript。我收到一个Cannot find module 'eslint-plugin-@typescript-eslint.错误。我还看到 vue cli 添加了 "@vue/cli-plugin-typescript": "^4.3.1" 即使我的 "@vue/cli-service" vsersion 是 "^3.7.0"。这可能是导致以下错误的原因吗？我可能会遗漏什么？

堆栈跟踪：

.eslintrc.js：

babel.config.js：

vue.config.js：

tsconfig.json：

包.json：

使用 vue cli 添加打字稿时选择的选项：

我刚刚将我的 Vue 项目迁移到 Typescript，但是我需要处理一个缺失的情况。

我需要在我的应用程序中处理一些分页表，所以我创建了一个Tablemixin 来处理我的记录集合的分页：

呈现表格、扩展 mixin、填充records属性并简单地显示visibleRecords计算属性的结果的每个组件。一个基本组件：

这行得通，但是通过调用“visibleRecords”，我失去了我的数据类型的知识（RecordType在示例中）。我需要让打字稿理解visibleRecords（在mixin中实现）返回records属性的相同数据类型（在实现thr mixin的组件中被覆盖）

我尝试Table使用泛型实现 mixin（如您在前面的代码中所见），但它不起作用，因为在扩展 Mixin 时我无法定义泛型类型：

引发错误。

有没有办法做到这一点？有什么建议吗？

我有一个简单的BasePreviewImage组件需要从内部 API 异步获取 Array.Buffer()。但是，尽管组件本身已被销毁，但似乎async fetch()每个创建的实例都会调用它。

例子：

当我加载带有 1 个BasePreviewImage组件的页面然后返回，然后重新打开页面时输出。这将继续调用 fetch n 次页面已打开。

当用户浏览页面时，如何避免多次调用 API 以及此处是否存在其他一些内存泄漏？

我不确定问题是代码、配置、、、、、还是vue其他地方。nuxtnuxt-property-decoratorvue-class-component

相关但无帮助：https ://github.com/vuejs/vue-class-component/issues/418

我想创建一个简单的游戏来帮助孩子们阅读，实际上它是一种名为“静音模式”的语言学习方法，无论如何这是 jsfiddle 链接

https://jsfiddle.net/raminSafari/b7zhc98q/19/

例如，如果我希望学生首先阅读“笔”，我指向 p(1)，然后指向 e(2)，最后指向 n(3)，代码适用于具有唯一字母的单词，但是当单词类似于“爸爸”它没有按我想要的方式工作，我希望它显示 d(1)(3), a(2)

这是完整的简化代码（我知道它不健壮）

谢谢你

在为故事书定义故事时，我正在尝试进行类继承以避免代码冗余，因为我有一堆场景（故事）来涵盖更少/更多的数据相似性。我正在使用带有vue-property-decorator的 vue-class-component 方法来定义组件。

这是一个例子：

为什么我scenarioOne不能调用method1()whilescenarioTwo可以？

在线程 中 v-model 在 Vue 2.x 中有哪些限制？，我学会了如何链接父子组件v-model。建议的解决方案是：

不幸的是，我无法将其重写为vue-class-component语法。下面的代码既不工作也不应该工作：

关于如何在 vuejs 中基于类的组件中编写计算设置器的问题的答案不适用于 vue 组件属性，因为属性是只读的。所以我不能写this.value = newValue。

直接value使用有问题##

假设初始值为空字符串。

1. 输入“f”
2. 日志将是"checkpoint" ""
3. 输入“一”
4. 日志将是"checkpoint" "f"
5. 输入“d”
6. 日志将是"checkpoint" "fa"

等等。