问题标签 [vuejs3]

我在 VueJS 中创建一个游戏，当页面加载时，我想要一个方法来触发，对外部 API 进行 ajax 调用并创建一堆数据属性。当玩家赢得回合时，我希望他们能够看到一个允许他们重新开始游戏的按钮。我正在使用mounted()钩子在页面加载时触发该方法。

我的问题是，如果游戏设置和 API 调用在函数内，我不确定如何实现重启mounted()功能。有没有办法mounted()再次运行该功能？

我有一个作为 DOM 渲染的一部分安装的组件。应用程序的骨架是

<my-component>是功能性的（它显示一些表单输入）和$emit父级的数据。

有没有办法重新安装它？目标是让组件内容和设置就像它是第一次渲染一样（包括重置data()保持其状态的元素）。

有一些解决方案，但他们都假设重写data()，我想避免。

我的理解是，一个组件实际上是在渲染过程中在正确位置注入到 dom 中的 HTML/CSS/JS 代码，所以我担心“重新安装”它的概念不存在 - 我只是想在去之前确保数据（） - 重写方式。

VueJS 自动继承Non-Prop 属性，非常适合 data-* 属性。

但是我们不想继承“class”和“style”属性来保存我们的核心组件免受任何新开发人员的任何布局更改。（因为我们希望组件的所有样式都在它的样式文件中）

有inheritAttrs: false避免“非道具属性”继承，但：

注意：此选项不影响类和样式绑定。

https://vuejs.org/v2/api/#inheritAttrs

所以建议避免核心组件中的“类”和“样式”继承？

更新：

建议的解决方案：

但是当依赖于组件的属性时，建议的解决方案甚至更复杂：

更新[2018 年 5 月 20 日]：

通过 VueJS 的聊天频道得到答案 - https://discordapp.com/channels/325477692906536972/325479107012067328

解决了 JSFiddle - https://jsfiddle.net/53xuhamt/28/

更新[2021 年 4 月 28 日]

在 Vue3 中，我们可以通过以下方式禁用属性继承：

Vue3 文档 - https://v3.vuejs.org/guide/component-attrs.html#disabling-attribute-inheritance

示例 - https://jsfiddle.net/awan/oz5fbm2k/

我有兴趣深入了解 Vue.js v3，甚至在它发布之前。某处是否有（WIP）API 文档？像这个：

https://vuejs.org/v2/api/

我只能找到一些文章和半官方出版物。尝试了这个存储库，但没有名为dev的分支。

我知道它仍在进行中，但是仍然没有内部保存的文档吗？

我正在尝试为我导入的异步组件设置加载组件。这可行，但我会在安装它之前更改该组件的“颜色”道具。我怎样才能做到这一点？

无论如何，我试图更改为道具颜色，但这不起作用。谢谢你的帮助 ！

什么 Quasar 可以做 Bootstarp+Vuejs 做不到的？

当第一次通过 Quasar 介绍然后想到 VueJs+Bootstrap（实际上现在 BootstrapVue 也可用）时，我想知道 Quasar 可以做哪些 Bootstrap +Vuejs duo 不能做的额外工作。

帮我选一个。我们将进行一些开发。

我目前正在使用 vuejs 2 和 vuetify 2 开发企业应用程序的 Web 前端。计划在发布后迁移到 Vuejs 3。

现在是否应该避免任何编码模式以便将来轻松迁移到 vuejs 3？

Vue 3 发布路线图的 github 说：

高级 API 尽可能接近 2.x。仅在必要时进行重大更改，并将通过 RFC 流程进行沟通。（https://github.com/vuejs/roadmap）

我想创建一个用TypeScript编写的可重用包装函数，用于通过使用组合函数触发 toast 通知，如 Vue 3.0 的当前规范中所定义：组合 API RFC。

本示例使用 BootstrapVue v2.0 toast 组件。使用 Vue 2，它将通过根上下文中this.$bvToast的Vue 组件实例注入来调用：

这个类似服务的组合函数看起来很像这样：

并且会像这样使用：

我正在尝试将实例中的值设置data()为Vue从mongodb api调用返回的 Promise 检索到的值。我能够检索我正在尝试实现的数据，但是我很难在data()现场使用它，以便我可以在模板中访问它。

我从中找到的一些解决方案vue2似乎在这种情况下不起作用。提前致谢。

Vue

我收到的错误说

未捕获（承诺中）类型错误：无法设置未定义的属性“帖子”

在参照this.posts = ...

我目前在测试我的 Vue 应用程序时遇到了一种行为（特别是在包含 vuetify 时）。我使用 Jest 作为测试运行程序，但使用 mocha 时遇到了相同的行为。

首先要注意的是，问题只发生在 @vue/test-utils 的 mount 而不是 shallowMount。此外，它仅在您使用 mount 两次时才会发生（我猜原因是 Vue 对象的污染，但稍后会更多）。

现在我的组件只是一个基本的v-data-table的包装器，其属性值绑定到它的项目和一些用于复选框而不是文本的自定义插槽。

现在的问题。首先，这是我的测试的第一个变体的样子（基本上是 vuetify 推荐的方式。看看这里。由于测试本身并不重要，我只希望 true 在这里是真的

现在，正如在不使用 Vue.use(Vuetify) 的情况下已经评论过的那样，我将收到组件 v-data-table 未注册的错误。有了它，我剩下以下行为

1. 测试第一件事按预期运行并成功
2. 第二件事失败了以下错误

类型错误：无法读取未定义的属性“$scopedSlots”

并在挂载（....）时失败。为了使行为更加怪异，如果我在此行进行调试并停止，请在调试控制台中手动运行挂载，它在第一次时也会失败并出现相同的错误。如果我再次运行它，它会起作用。例如，如果我执行这个测试 4 次，就会发生这种情况。第一次成功->第二次失败->第三次和第四次再次成功。

现在我确信如果函数获得相同的输入，它们的行为方式相同。所以挂载的输入必须在第一次调用时改变。我的猜测是 Vue 类会以某种方式受到污染。因此，如果我查看localVue的文档，这个实用程序是为了防止对全局 Vue 类的污染。所以我将代码更改为

因此，我为每个测试创建了一个新的 localVue 实例和 vuetify。并使 localVue 使用 vuetify。现在这让我回到了错误

[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

我还尝试了注入 vuetify（实例化）或 Vuetify 的各种更改。使用全局 Vue.use 等。最后，我总是留下这两种行为之一。

现在的解决方法似乎是将每个测试写在一个有效的文件中，但我认为这是非常糟糕的做法，我想了解这里到底发生了什么。

我现在还为 Vuetify 和 Vue-Test-Utils 创建了问题，因为我无法想象这是预期的行为，以及通过测试作为 Repo 制作了我的组件的精简版本

rm-test-mount-fails-on-second-exec

重现：

1. 克隆回购
2. npm 安装
3. npm 运行测试：单元

版本：

Vue： 2.6.10
Vue-Test-Utils： 1.0.0-beta.29
Vuetify： 2.1.12