问题标签 [vue-mixin]

我遵循了一个关于使用 Vue.js 进行 HTML 5 表单验证的好教程，我尝试了太多次在失败的输入旁边添加消息错误，但我做不到。这是教程：https ://logaretm.com/blog/2019-05-03-html-aided-vuejs-form-validation/

这是我的代码：

我想在每个输入字段旁边的范围内显示错误消息

我正在尝试将 mixins 用于我的几个 Vue SFC 中使用的一些可重用方法。现在，我担心的是 mixins 是如何处理数据属性的？我发现使用 mixin 时很容易出错（例如，在主组件中重命名数据属性并在 mixin 中访问它时）。处理这种情况的最佳方法是什么？

然后在我的mixin上：

如您所见，main.vue数据属性用于 mixin 中，反之亦然（以及计算属性和方法）。所以我担心如果我在或任何其他使用 mixin 的 vue 组件中更改数据属性名称（比如说mainComponentValueto name）main.vue，那么它会弄乱我的混音。反之亦然，当我从 mixin 更改计算属性时，main.vue 将被搞砸。

有什么办法可以为这样的情况添加某些检查？

作为参考，这里是一个示例 CodePen： https ://codepen.io/keechan/pen/eYBRQGM

谢谢！

我正在尝试在 Vue.js v2.x 中创建一个 mixin，但是每次我调用它的一个方法时，控制台都会显示一个错误：

TypeError: mixins_settings_js__WEBPACK_IMPORTED_MODULE_3 _.default.loadSettings 不是 eval 的函数 (Login.vue?7463:102)

/src/mixins/setting.js

/src/components/Login.vue

我哪里错了？

我有混合如下

我在 MyComponent.vue 中使用，我也有同名的数据 gridSchema

在我写的时候在我的 MyComponent.vue

它给了我错误

Cannot assign to 'gridSchema' because it is a read-only property. 我有什么遗漏吗。请指导我。

我为 Vue 2 编写了一个“加载状态”mixin：

我将此 mixin 用于其他组件以保持loading状态。例如表单、按钮、表格等。

现在，我尝试将此 mixin 重写为 Vue 3 的组合 API 样式。理想情况下，我想像这样使用我的loading组合：

我的问题：

当然我可以这样定义我的组件：

但是想象一下，我有 20 个使用这个 mixin/composable 的组件。所以我想只定义一次这个loading道具（就像我在 mixin 中所做的那样）。

有没有办法使用组合 API 来做到这一点？

) 我正在编写一个非常大的 vue 应用程序，现在我有一个问题，如何组织导入 mixins、过滤器和指令。我遇到了麻烦，因为我发现我不明白该怎么做（（（我希望有人能帮助我。

我在 Nuxt 2.13 通用模式下，内存使用和泄漏严重！

所以当我在寻找相关问题时，我在 Nuxt Docs Plugins - NuxtJS中找到了这个：

不要使用 Vue.use()、Vue.component() 和全局，不要在这个函数内插入任何 Vue 中的东西，专门用于 Nuxt 注入。这将导致服务器端的内存泄漏。

谁能告诉我这是什么意思？？

我目前正在使用许多外部插件和一些通过vue.component()and全局添加的 mixin vue.use()。他们可能是问题吗？（我还有一个 utils.js 混合文件，其中包含许多方法和计算数据，这些方法和计算数据被全局添加到nuxt.config）

我的一些插件和 mixin 全局添加到nuxt.config.js文件中：

我的 Mixins 也以默认方式添加：

我一直在研究mixins，但对此我一无所知。

我想要的是有条件地导入 js 文件但不使用组件。

这是我迄今为止所做的第一种方式。

但问题是我不知道如何将这些 js 文件作为 mixins ！有没有办法把它变成一个mixins？

这是第二种方式

通常 mixins 是这样声明的，所以我导入的比这更高。像下面

但它不断出错，所以它只是不断制作空白页。（错误消息就像条件未定义的东西..！）所以如果我设置正确的条件，它会得到解决吗？还是我错过了什么？

您的帮助将非常感谢 :-) 谢谢！

首先，让我分享我的工作流程。在我的 nuxt 应用程序中，我试图通过获取用户的窗口宽度来跟踪用户是来自桌面还是移动设备。要做到这一点，

首先，我在 default.vue 中使用 js 的 window 对象来更新商店中的 height 和 width 变量。这是代码

之后，我创建了一个插件来保存我的 mixins。在 mixin 中，我通过从 store 中获取 width 变量值来填充我的 isMobile 变量。

现在，正如我所期望的那样，我在每个组件和页面中都获取了这些数据。但是当我第一次加载页面或刷新页面时，该值返回 true！即使实际值是假的。但是，如果我通过导航转到其他页面或返回到初始页面（不刷新），我将获得实际值。因此，由于某种原因，该值似乎在我的任何页面的初始加载时都没有更新。通常我通过使用 async-await 获取数据来解决这类问题，但不确定在哪里使用它。如何在页面加载时从其初始状态更新 mixin 数据？

I'm building a basic 'required' form validation function. Here's the function:

JS:

HTML:

The above works great. If I start typing in the input, the returned value goes null. If I empty the input, the returned value comes back as expected, "This field is required".

My question is, how can I return the value as null/blank to start? Expected flow is:

• Returned value is null/blank to start
• User starts typing, nothing changes because string.length != 0
• User deletes all characters, causing string.length == 0, causing the returned value to be 'This field is required!'