问题标签 [vue-mixin]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
2191 浏览

vue.js - 将数据存储在 VueJS mixin 中

我想创建一个向父级添加几个方法的 VueJS mixin。为了做到这一点,我还需要存储一些数据。

是否可以将数据存储在可以由使用 mixin 的组件访问的 mixin 中?

0 投票
1 回答
3368 浏览

vue.js - Vue.js / Mixins - 有没有办法在 vue 组件之外获取全局 mixin-object?

我是 Vue.js 的新手

我正在使用 Vue.js 2.4.4。我在 app.js 文件中创建了全局 mixin:

这个 mixin 导入了一些带有验证方法等的 Auth 对象,这些对象需要在每个组件中。我所有的组件都可以检查这个 mixin,它工作正常。

但是我需要在每次路由请求后检查身份验证状态,并且我想使用我当前存在的 mixin,所以我试图在我的 router.js 文件中做这样的事情:

问题: 有没有办法获取全局 mixin 对象并更改它的内部值,或者您能否提供一些小的建议或示例什么是此类任务的正确解决方案?或者我应该使用插件而不是 mixins?

0 投票
1 回答
3546 浏览

javascript - 如何测试 Vue.js mixin 的模板?

所以我们有一个在单个组件中继承的 Vue.js mixin。mixin 有一个由少数组件继承的模板,它可以正常工作。但是,我不知道如何使用 vue-test-utils 测试模板。

这是我正在做的一个简化示例:

当我运行它时,我收到消息:

如果我向已安装的 Vue 组件添加一个渲染函数,它只会渲染我返回的任何标记(如预期的那样)。但是,当没有渲染方法(因此没有模板)时,组件的 html 是未定义的。


问题:

  1. 为什么'find'函数找不到mixin的模板?
  2. 单独测试mixin是否正确,还是在真实组件中测试更好?

注意:该模板似乎确实存在于 VueComponent 下的包装器中:

0 投票
1 回答
1394 浏览

wordpress - VueJS Global Mixin 只读变量无法从组件中的方法访问

我试图使用 vuejs 作为 WP restapi 的前端脚手架。我需要所有 vue 组件都可以访问由 wordpress 生成的 api url。这是我所做的:

问题是,我可以从模板标签内部访问变量,如下所示:

但是我无法在组件的方法中访问它:

在这部分代码中,它给了我这个错误:

ReferenceError: apiURL is not defined

什么是正确的方法。我正在使用 VueJS 版本 2。

0 投票
1 回答
1375 浏览

javascript - 用于全局功能的 Vue 2 Mixins

我想为应用程序和路由内部的全局身份验证实现一个简单的 auth mixin。auth mixin 有一个loggedInTrue 或 False 数据和两个登录和注销功能。整个应用基于 vue router webpack 模板。问题是loggedIn状态不会被保存。因此,当我转到 Login.vue 并登录时,loggedIn将设置为 true,但是当我再次转到 Login.vue 组件时,checkStatus 函数将loggedIn再次登录false

我怎样才能

这是我的混音:

Auth.js

main.js

登录.vue

0 投票
8 回答
25156 浏览

typescript - 无法在带有打字稿的 vue 中使用 Mixins

我有这样的文件夹结构

group.vue 的脚本

groupMixin.ts 的代码

我在这里面临两个问题。

首先,要导入我使用../../的ts文件,有没有办法使用./或@/。在不使用 lang="ts" 的情况下,我可以导入这样的 js 文件 @/services/...

其次,无法访问我在 groupmixin.ts 中声明的变量测试

0 投票
1 回答
411 浏览

javascript - 在两个组件上使用 mixin:它只在第一个组件上调用方法

我有两个组件需要共享一个方法。我在这个方法中使用了 mixin,并将 mixin 添加到两个组件中。当我单击第二个组件时,它会触发第一个组件而不是第二个组件上的方法 - 在这种情况下,它会打开顶部下拉菜单而不是第二个下拉菜单。

这是我的代码片段...

0 投票
0 回答
573 浏览

vue.js - 如何在多个 vue 组件中重用相同的功能

我在 6 个 vue 组件中有重复的 onClick 处理程序,我在这个 mixin 中提取了它

我想在其他 6 个 vue 组件中重用该 mixin,但 onClick 事件在浏览器控制台中触发了此错误:

属性或方法“onLastMonth”未在实例上定义,但在渲染期间引用。

0 投票
2 回答
6838 浏览

javascript - Vue.js: Using mixin functions inside vue.router routes

I want to dynamically set the title of the window for each route, so in each routes: [] child object I have a meta: { title: ... } object. For example:

I call this title function in an afterEach hook:

In the ... do stuff ... portion I want to call a method from my mixin GetAndStore.js called loadProfile(profileId). I added GetAndStore into the router's mixins, but loadProfile is not available (this.loadProfile is undefined). I loaded GetAndStore globally and tried again with the same results. I've tried every configuration I can think of for the past hour I've not found any way at all to access the methods from GetAndStore from within this setup.

Any ideas of what I'm missing or what I'd need to restructure in order to access mixin methods from within routes->element->meta->title ?

0 投票
2 回答
5955 浏览

javascript - 如何使用 Vue 实例中的 Global Mixin 方法

假设我有以下情况,使用一个 Global Mixin 用 Vue 创建一个全局 helper 方法:

我知道我可以在组件及其子组件内部的其他方法中调用该方法。但是如何从 Vue 实例“vm”中调用 mixin 方法“replaceString”呢?我尝试使用“vm.replaceString”,但一直返回“未定义”。