如何从另一个函数访问全局函数(Vue.prototype.myFn)?

2023-12-09

我在 nuxt.js 项目中并尝试创建全局函数,但出现以下错误:

Cannot read property '$toggleBodyClass' of undefined

这是我的代码(plugins/globals.js):

import Vue from 'vue';

Vue.prototype.$toggleBodyClass = (addRemoveClass, className) => {
  const elBody = document.body;

  if (addRemoveClass === 'addClass') {
    elBody.classList.add(className);
  } else {
    elBody.classList.remove(className);
  }
};

Vue.prototype.$setModalBackdrop = () => {
  this.$toggleBodyClass('addClass', 'modal-open'); // ** How to make this work? **
};

当我在我的组件(components/myComp.vue)中使用它时,它工作得很好:

<template>
  <div>
    <button @click="handelClick">Toggle Class</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$toggleBodyClass('addClass', 'modal-open');
    },
  },
};
</script>

请帮忙,谢谢。


只需更改您的代码

this.$toggleBodyClass

to

Vue.prototype.$toggleBodyClass
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何从另一个函数访问全局函数(Vue.prototype.myFn)? 的相关文章

  • Jest 中从未调用图像 onLoad 处理程序

    我正在尝试使用 Jest 测试将 dataUrl 加载到图像中 我正在使用 JSDOM 并按照说明添加resources usable 作为一个选项 如果我直接从 Node 运行该代码 则该代码可以工作 但是当我尝试在 Jest 中运行它时
  • Jqplot 中两个系列数据的不同颜色条

    我想知道如何在 Jqplot 中为两个系列制作不同的颜色条 如果我只有一个系列数据 它的工作原理如下图所示 红色和绿色基于其值 但是 如果我有两个系列数据 我无法为每个系列数据配置两个系列颜色 目前我只能做这个图 我希望两个系列图可以根据其
  • 全局 JavaScript 变量作用域:为什么这不起作用?

    所以我在玩 JavaScript 时遇到了我认为奇怪的事情 有谁能解释一下以下内容吗 我已将警报值作为评论包含在内 为什么 foo 中的第一个警报 msg 返回不明确的并不是outside var msg outside function
  • Object.assign() - 奇怪的行为需要解释

    我有这个代码 function margeOptions options passedOptions options Object assign options passedOptions let passedOpts a true let
  • 过滤器返回 true 或 false

    我正在使用过滤器在 data it 返回对象中查找 id 它返回的对象不是 true 或 false 如果我怎样才能返回 true 或 falseval recoredId valueId var hasMatch data filter
  • RequireJS 不遵循设置了 baseUrl 的 data-main 的相对路径

    使用 requireJS 我尝试为我的数据主指定一个与 baseUrl 不同的路径 看来 requireJS 会忽略我在文件名之前输入的任何内容 并始终在 baseUrl 文件夹中查找该文件 我有以下文件夹结构 index html scr
  • Ember.js 数组作为模型的属性

    干杯 我有一些模型 它的一个属性是一个数组 但由于某些原因 我在服务器上使用 mongoDB 并且它是嵌入式模型和 ember data 的问题 我不能做这样的事情 App Foo DS Model extend numbers DS ha
  • 赋予 d3 序数轴标签与尺度名称不同

    我有一个序数scale具有不同值的某些标签 我想显示该比例的轴 其中轴标签与比例标签不同 我有这个代码 var width 1000 var height 600 var margins left 100 40 right 25 botto
  • JQuery _renderItem 没有被调用

    我正在尝试使用 renderItem 函数创建自定义 ui menu item 元素 但经过可能尝试后 我什至无法调用该函数 自动完成功能正在工作 但就像 renderItem 函数不存在一样 这是我的脚本部分
  • 检测 JavaScript 中的焦点丢失

    我希望能够检测 JavaScript 中任意元素何时失去焦点 因此我可以构建一个类似于 jEdit 的内联编辑工具 我不能依赖 jQuery 来实现这个库 所以我需要一个本机方法来完成它 我查看了 onblur 这似乎是正确的事情 但 MD
  • Node.js - Async.js:并行执行如何工作?

    我想知道 async js 中并行执行是如何工作的 async require async async parallel function callback for var i 0 i lt 1000000000 i Do nothing
  • 如何让无限滚动发挥作用?

    我正在尝试让这个无限加载脚本在我的项目中工作 这是我的 HTML div div div class pagina div div class pagina div div class pagina div div class pagina
  • 如何在 Astro 中的组件之间共享状态?

    我相信我在代码中采用了错误的方法 如何在按钮单击中设置客户端首选项 该按钮单击用作全局 astro 组件中的道具 或者我应该怎么做 我知道这是可能的 因为 astro js 本身在他们的文档网站中这样做了 下面是我的尝试的解释 我目前正在开
  • 是否可以从 webpack 中的文件名中删除特殊字符?

    长话短说 我的资产文件名中不能包含某些字符 例如连字符 我没有运气通过解析 webpack 文档来弄清楚是否可以使用正则表达式或类似的东西重命名文件 这样我就可以从我无法控制源文件名的 3rd 方包中删除任何连字符 我的超级天真的例子是这样
  • Javascript/DOM:如何删除 DOM 对象的所有事件侦听器?

    只是问题 有没有办法完全删除对象的所有事件 例如一个div 编辑 我添加每div addEventListener click eventReturner false 一个事件 function eventReturner return f
  • jVectorMap - 向下钻取地图 - 自定义背景

    我正在使用 jVectorMap 中的向下钻取地图 并且尝试将自定义背景颜色设置为地图的第二层 为了自定义主级别 我使用 main 参数 但我不知道如何将其扩展到地图的较低级别 提前致谢 马切伊 None
  • Javascript 替换为正则表达式无法正常工作

    我正在尝试使用正则表达式验证名称 正则表达式阻止用户连续输入 2 个空格或点 这是我的代码 function test input var regex A Za z 0 1 s 0 1 input value input value rep
  • Firestore != 查询错误:“”!=”类型的参数无法分配给“WhereFilterOp”类型的参数。ts(2345)

    我的打字稿编译器有问题 此查询出现错误 const xxx admin firestore collection xxx where end timestampDate where end lt timestampDate get 错误 类
  • 使用重复模式捕获正则表达式

    我试图捕获字符串的所有部分 但我似乎无法正确处理 该字符串具有以下结构 1 22 33 中间有运算符的数字 可以有任意数量的术语 我想要的是 1 22 33 1 22 33 但我得到 1 22 33 22 33 我尝试过各种正则表达式 这是
  • 在64位环境中加载32位进程

    我有以下几个问题 CHM 是 编译的 HTML 文件 我的 CHM 文件有一个启动 32 位应用程序的链接 CHM 文件是用 Javascript 编码的 这在 32 位操作系统环境中运行良好 但这在 64 位操作系统环境中不起作用 原因是

随机推荐