问题标签 [vue-class-components]

是否有某种方法可以在模板中使用导入的对象，而无需在 vue 组件中为其指定别名/属性。即我可以以某种方式使用未在“this”上定义的变量

我有这个路线定义：

还有这个组件（我使用 Typescript 和 vue-class-component）：

当然，这给了我这个警告

所以我用道具功能更新我的路线定义

这行得通，但如果他给我一个“坏”的 id 参数值（例如“/article/toto”），我找不到如何将用户重定向到特定页面

router.onError 似乎在这里不起作用

导航守卫，在哪里可以使用 next(error) can't modify params/props

有人知道吗？

我有一个v-for呈现数组初始状态的列表。但是当我将项目添加到数组时，渲染不会更新。文档和此处的大多数答案都提到您必须使用this.$set而不是array.push()，但在我的情况下这没有帮助。

调用时addTag("thing")，“thing”被添加到数组中，并且在 Vue 检查器中可见。只是v-for没有更新而已。

模板

代码（vue typescript 类模板）

编辑此代码使用打字稿类组件

好的，这是一个奇怪的用例，但无论如何。

我有一个包含菜单组件的控件组件，它还包含一个控件组件但没有菜单（奇怪的东西，但那是设计）。

我所做的。

控制组件：

插入菜单内部的菜单内部控件组件——相同，但没有菜单组件（显然是为了防止递归）

但是在这个设置中我得到了一个错误：

（MenuInnerControls.js?9737:8 — 是继承类中的 renderMenu 方法）

我正在使用 vue、vuex 和 vuex-typescript 构建一个电子应用程序。因此，我使用 vuex-typescript 为我的商店提供了以下代码：

将商店添加到我的 vue 实例后，我尝试访问我的 App.vue 中的 firstTime 变量，如下所示：

查看调试器时，商店中的所有内容都已完美初始化，但我的 App 实例的 fTime 未定义。

为什么会这样？关于事物的制作顺序，我有什么不明白的吗？

PS。firstTime 是 Dispatcher 类的成员

我正在尝试使用 vue-class-component 和 typescript（在此处找到https://github.com/vuejs/vue-class-component）创建一个 vue 组件。据我了解，数据是在类中定义的，如下所示 - 但我收到错误：

这是我的实际代码的精简版，但它仍然不起作用：

编辑：似乎将“测试”声明更改为

工作过

我正在尝试使用具有以下要求的 vue-class-component 和 vue-property-decorator 在 typescript 中创建一个 vuejs 组件库：

• 库组件应该用类风格的打字稿编写。
• 库组件应导出为 es6 模块以允许在项目中进行 treeshaking。

对于库，我使用了最新版本的 @vue/cli 来搭建项目。在那个库项目中，组件工作得很好。

另一方面，应用程序正在使用 webpack-setup，在这里我想使用 vue-components。

通常当我想在 es6 中构建基于 typescript 的库时，我使用 tsc 将 ts-files 转换为 es6 js-files。但是按照这种方法，组件不知道模板。有没有办法将 tsc 与 vue-template-compiler 结合起来？

我找到了另一种方法来完成这项工作，但我对这种方法一点也不满意：

我使用"vue-cli-service build --target lib --name vue-lib ./src/index.ts" 这种方式 vue-cli-service 将创建一个 umd-bundle 和 commonjs-bundle，如此处文档中所述。在项目中，我可以使用带有上述//@ts-ignore语句的组件。所以我丢失了声明并且组件不在 es6 语法中：/

为了更好地理解我遇到的问题，我在 github 上创建了一个最小示例，您可以在此处找到：

库： https ://github.com/Sh4bbY/vue-lib

应用： https ://github.com/Sh4bbY/vue-project

如何在 vue-class-component 中同时使用基类和 mixin？

直接在模板中绑定来自 mixin 的函数可以正常工作，但是尝试在 typescript 代码中使用这些函数会在编译时导致错误。

据我了解，要使用 mixins，您必须从它们扩展：

不幸的是，我已经有一个基类，所以这不是一个选择。这是我的代码......有没有办法用 vue-class-component 做到这一点？

请注意，我可以在需要时将“this”转换为，这将起作用，但如果我必须在所有地方都这样做，这似乎有问题：

不久前，我使用 . 创建了一个 vue 项目vue init webpack .，一切正常。

现在我尝试安装 typescript 和ts-loader. 我创建了一个文件，src其中包含：

我添加了tsconfig.json

我将main.js文件重命名为main.ts和。router/index.jsrouter/index.ts

对于 webpack 配置，我添加/修改了几行：

我为 vue-loader 添加ts-loader并修改了一些东西（webpack 的路径是build/webpack.base.conf.js）

运行时没有错误，npm run dev但几乎没有警告。

这里的问题是在文件中src/components/HelloWorld.vue

[Vue 警告]：属性或方法“消息”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件

我尝试了很多方法来通过更新配置来解决这个问题，但似乎没有任何效果。

谁能帮我解决这个问题？

我正在尝试使用 vue-property-decorator 包来实现 Vue Router 的组件内导航防护。底层，vue-property-decorator 依赖于 vue-class-component 包。它提供了一种registerHooks方法，允许您声明哪些方法应该被视为生命周期钩子（而不是实例方法）。

以下代码有效，在输入路线时会发出警报：

Router.ts 文件包含按照文档的钩子注册，并且是：

路由器文件在导入组件之前导入到 App.ts 文件中，因此挂钩在组件之前注册。

但是，我似乎无法将回调传递给next方法。鉴于Foo上面的更新组件：

警报永远不会被触发。我是否遗漏了什么，或者这是 vue-class-component 包中的错误？我应该补充一点，我也无法将回调传递给每个路由和全局路由导航防护中的下一个函数。

非常感谢您的帮助，非常感谢！