单击事件导致错误` `TypeError: this.$varName.on不是一个函数`这不是一个函数
单击事件导致错误TypeError: this.$varName.on不是一个函数这个错误通常是由于在代码中使用了错误的语法或方法导致的。具体来说，this.$varName.on表示在this.$varName上调用了一个名为on的方法，但是该方法不存在或不是一个函数。
要解决这个错误，可以按照以下步骤进行排查和修复：
- 检查变量命名：确保
this.$varName是正确的变量名，并且在之前的代码中已经正确地声明和初始化。如果变量名错误或者未初始化，会导致该错误。 - 检查方法调用：确认
on方法的正确用法和语法。根据具体的开发框架或库，方法的调用方式可能会有所不同。可以查阅相关文档或参考示例代码来确保方法的正确使用。 - 检查对象类型：确保
this.$varName是一个对象，并且该对象具有on方法。如果对象类型不正确或者对象没有定义on方法，会导致该错误。可以使用调试工具或打印日志来查看this.$varName的类型和内容。 - 检查代码逻辑：审查代码逻辑，确认是否存在其他可能导致该错误的问题。例如，可能在之前的代码中对
this.$varName进行了赋值或修改，导致其类型或内容发生了变化。
如果以上步骤都没有解决问题，可以尝试以下方法：
- 检查相关依赖：确认是否正确引入了相关的库或框架，并且版本兼容性良好。有时候，错误的版本或缺少必要的依赖会导致方法无法调用。
- 查找文档和资源：搜索相关的文档、论坛或社区，看是否有其他开发者遇到过类似的问题，并且找到了解决方案。
- 联系技术支持：如果以上方法都无法解决问题，可以联系相关技术支持团队，向他们描述问题并提供相关的代码和环境信息，寻求他们的帮助和建议。
总结起来，单击事件导致错误TypeError: this.$varName.on不是一个函数通常是由于代码中使用了错误的语法或方法导致的。解决该错误的关键是仔细检查代码，确认变量命名、方法调用和对象类型的正确性，并排除其他可能导致错误的问题。
相关·内容
我有以下HTML表单和提交按钮的嵌套主干视图：
var Button = Backbone.View.extend({
enable: function() {
this.$el.prop('disabled', false);
return this;
},
disable: function() {
this.$el.prop('disabled', true);
}
};
var Form = Backbone.View.extend({
el: '#logi
浏览 0提问于2013-05-29得票数 0
回答已采纳
在my-app.html中
...
<paper-icon-button icon="my-icons:menu" onclick="this.$._joesDrawerToggle()"></paper-icon-button>
...
<script>
Polymer({
is: 'my-app',
...
_showPage404: function() {
this.page = 'view404';
},
_joe
浏览 4提问于2017-02-04得票数 0
回答已采纳
1回答
我试图将单击事件绑定到主干视图的顶层标记。目前的情况如下：
var PageSize = Backbone.View.extend({
tagName: 'option',
className: "setPageSize",
initialize: function(options) {
this.value = options.value;
this.text = options.text;
},
template: _.template(
"<%=te
浏览 3提问于2018-05-23得票数 0
回答已采纳
2回答
我有一个单击事件，对于这个单击事件，我想调用父组件中的函数/方法。因此，在我的子组件中的单击事件：
<button @click.native="addNew" />
以下是我的方法：
methods: {
addNew() {
this.$parent.addNew();
},
},
我想在我的父组件中调用这个函数：
addNew() {
this.$emit('open');
},
但是我得到一个错误，比如: this.$parent.addNew不是一个函数.我怎么才能修好它？
浏览 6提问于2022-10-04得票数 0
1回答
我有一个Loader组件，在其中它将基于
created() {
this.$root.$on('show-loading', (vars) => {
this.loading = vars;
console.log('loader executed');
});
},
目前，通过vue组件，我可以通过show-loading执行this.$root.$emit('show-loading', true);。
但是，我现在正试图从vuex模块文件中执行代码。我得到了一个错误
TypeErro
浏览 2提问于2020-07-03得票数 1
回答已采纳
我正在尝试生成用于显示的JSON，单击Konva对象。除onClick外，所有属性都按预期工作。
如何使用Laravel：：JSON ()在json中传递JS函数？
这是我试过的。
return Response::json([
'status' => 'completed',
'message' => 'Question ID:'.$id.' Retreived',
'data' => [
浏览 0提问于2021-07-04得票数 2
回答已采纳
我正试着让一些测试通过一个。直到昨天，我添加了一些代码，然后使用Em.run.next在运行循环中运行。
这是我在考试中所做的事情。
visit('/').then(function() {
find('bm-select').click();
andThen(function() {
equal(1,1, 'yay');
});
});
问题是，当触发单击时，后一个函数将在andThen之后执行。到那时，我所有的测试都完成了，它会抛出错误。我认为andThen应该等待所有异步的东西完成。
当单击被触发时，这就是我的代码的样子
浏览 2提问于2014-12-10得票数 1
回答已采纳
我试图保存一个模型，我可以保存第一个模型的罚款，但是如果我保存一个模型，然后直接保存另一个模型-我得到以下错误，
Uncaught TypeError: Object [object Object] has no method 'call'
是什么导致了这个错误？
我的保存代码是这样的，
GroupModalHeaderView.prototype.save = function(e) {
var $this = this;
this.collection = new app.GroupCollection();
if(this.$("#group-na
浏览 0提问于2013-07-19得票数 0
尝试在onClick中执行一个简单的ReactJS事件/函数。
单击该按钮时，我希望运行一个名为"onClick“的函数，但我在控制台中得到了以下错误：
app.js:62 Uncaught TypeError: Cannot read property 'preventDefault' of undefined
搜索过，但不知道我出了什么问题。我看过ReactJ文档，这看起来是正确的，但显然不是。这是我的密码：
import React from 'react';
import ReactDOM from 'react-dom';
im
浏览 2提问于2018-06-23得票数 11
回答已采纳
class pageController {
constructor($scope, MyEditableGrid) {
this.$scope = $scope;
this.MyEditableGrid = MyEditableGrid;
this.myEditableGrid = {
appScope: this.$scope,
.....
}
}
$postLink() {
this.$scope.$on('message
浏览 2提问于2020-06-01得票数 0
这里又是我的简单的popover模块。可以将其分配给将触发弹出的视图：
function(app) {
var Popover = app.module();
Popover.Views.Default = Backbone.View.extend({
className: 'popover',
initialize: function() {
this.visible = true;
this.render();
},
setReference: function(elm) {
this.refe
浏览 0提问于2013-06-28得票数 4
回答已采纳
我试图让mooRainbow 1.2b ( )使用mootools 1.4.4，但我遇到了一个似乎找不到答案的错误。
该错误将在本节中抛出。
OverlayEvents: function ()
{
var lim, curH, curW, inputs;
curH = this.snippet('curSize', 'int').h;
curW = this.snippet('curSize', 'int').w;
// $A is deprecated, the original line
浏览 2提问于2012-04-12得票数 1
回答已采纳
2回答
我的就绪方法中有以下代码：this.$http.get('url',{},{ headers: { "X-App-Token": "token" } }).then( (data) => this.$set('cdata',data.data)) .catch( (error) => console.log('Got a problem'+error));
它工作得很好，问题是当我把它移到方法对象中的另一个函数时，它就不
浏览 2提问于2016-03-31得票数 1
2回答
我创建了一个视图，并拥有ff代码：
var app = app || {};
app.singleFlowerView = Backbone.View.extend({
tagName: 'article',
className: 'flowerListItem',
// tells where to apply the views
template: _.template( $("#flowerElement").html() ),
// render
render: function(){
var flow
浏览 2提问于2018-01-25得票数 0
我正在尝试使用来自的插件，正如上面所说的，但是我得到了一个错误
this.$dialog.confirm('Please confirm to continue')
Uncaught TypeError: Cannot read property 'confirm' of undefined
所以这个。$plugin是没有定义的..。为什么？
// I installed it via npm
npm install vuejs-dialog
main.js
// I imported it
import Vue from "vue"
浏览 3提问于2017-10-24得票数 1
回答已采纳
当B组件完成加载时，我通过EventBus向A组件发送一个“发射”事件。
当从组件接收到的事件是"on“时，它会将特定数据的值更改为true。
该值是在计算中注册的，只有当该值为真时，才能与"a标记“一起使用。
但实际上值更改为true，但单击事件仍然返回“返回false”；
如何使单击事件在VueJS中动态行为？
B组件
...
this.$EventBus.$emit("Loading");
...
A组件
<template>
<a href="javascript:void(0)" @click="com
浏览 3提问于2019-10-18得票数 1
回答已采纳
所以我有一个裸体页面，/pages/:id。
在那里，我使用以下内容加载页面内容：
content: function(){
return this.$store.state.pages.find(p => p.id === this.$route.params.id)
},
subcontent: function() {
return this.content.subcontent;
}
但我也有一个动作，在这个页面删除它。当用户单击此按钮时，我需要：
调用服务器并使用结果更新状态
重定向到索引：/pages
// 1
const serverCall = a
浏览 2提问于2020-12-16得票数 0
回答已采纳
我在Layout.vue to components one TheSidebar second TheHeader中有一个按钮，在TheHeader中有一个按钮可以打开TheSidebarcomponent中的侧边栏。 我需要在单击header中的按钮时打开侧边栏： 我的尝试： 在TheHeader中 methods: {
openSidebar() {
this.$root.$emit("open-sidebar");
},
}, 在TheSidebar中 data() {
return {
sidebarOpen: false,
};
}
浏览 12提问于2021-04-14得票数 0
回答已采纳
2回答
大家好，我想知道如何从子组件调用perent函数，我曾尝试使用$parent来调用perent方法，但出现以下错误: typeError：_this.$parent.forceRender不是一个函数这是我试图调用的父方法
methods: {
forceRender() {
this.componentKey += 1
}
},
下面是子组件，如您所见，我正在尝试使用$parent调用父方法
this.$parent.forceRender()
浏览 45提问于2020-11-14得票数 2
1回答
其概念是当用户单击集合(父组件)中的特定图像时，在Modal(子组件)中显示图像。这是我的代码： routes.js import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Explore from './components/Explore';
import OeModal from './components/OeMo
浏览 10提问于2020-01-12得票数 0
回答已采纳
3回答
<f7-input ref="input" placeholder="Enter a location" type="text"></f7-input>
mounted(){
var n = this.$refs.input
}
上面写着：
挂载钩子中的错误："TypeError:无法读取未定义的属性‘输入’“
有获得输入值的方法吗？提前谢谢
浏览 6提问于2018-04-18得票数 0
回答已采纳
我无法从子组件访问父方法。我照说的做了。
父模板：
<template>
<v-app>
<v-sheet height="100vh">
<v-sheet height="100vh" class="overflow-y-auto">
<div ref="ComponentDisplay" :is="currentComponent"></div>
</v-sheet>
浏览 4提问于2022-01-19得票数 0
回答已采纳
我在一个主干视图中有一个CKEditor实例，其中有一个插件，该插件可以将编辑器中的任何文本在单击时发布到我的站点。我也想清除点击上的CKEditor，但是使用setData不起作用。它会像正在发生的事情一样闪烁，但随后重置到已经存在的相同数据。
它在插件里面叫做：
注意：：THIS是引用主干视图的变量
CKEDITOR.plugins.add( 'post', {
init: function( editor ) {
editor.addCommand('post', {
exec: function(edito
浏览 2提问于2012-11-14得票数 2
回答已采纳
在我的App.vue组件中，我有：
mounted () {
this.$store.dispatch('switchSideNav', false)
...
console.log('COOKIE: ', this.$store.state('cookieAgreement'))
if (!this.$store.state('cookieAgreement')
.....
这引发了一个错误：
Error in mounted hook: "TypeError: this.$store.
浏览 3提问于2018-06-05得票数 2
回答已采纳
1回答
只是刚刚开始学习骨干，所以这可能是我完全误解了一个核心概念。
下面的代码来自于我的View对象，有些事情我不明白.
为什么highlightHero函数中的CSS更改不起作用。如果我做了一个
console.log(this.$el.children(".playerIcon"))
之后，我可以在outerHTML属性中看到，适当的样式已经添加到对象中，但它没有对DOM中的元素进行更改。
为什么如果我在highlightHero的底部插入一个故意的语法错误，那么整个过程就会很完美，尽管也会抛出一个异常。
。
initialize: function(){
浏览 3提问于2014-03-28得票数 0
回答已采纳
3回答
据我所知，我们可以使用本机.$选择器从本地dom中选择元素。但是，如果我有一个在单击按钮时触发的函数，那么如何通过该函数中的ID访问元素呢？
例如：
HTML：
<input id = "counter" value = "10">
JavaScript：
var testButton = this.$.testButton;
$(testButton).click(function(){
var counter = this.$.counter;
console.log(counter.value);
}
问题是"this.$
浏览 0提问于2015-08-20得票数 0
回答已采纳
嗨，我收到了这个错误：Uncaught (承诺中) TypeError: this.$set不是函数
这是密码：
export default {
data: function() {
return { movies: '' }
},
ready: function() {
this.showMovies()
},
methods: {
showMovies: function() {
浏览 3提问于2016-01-06得票数 5
回答已采纳
4回答
这个获取调用问题
、、、
我在主干视图中有以下代码：
var BookView = Backbone.View.extend({
initialize: function() {
this.render();
},
render: function() {
this.model.fetch({
success : function(model, resp, opt) {
alert(this.$el.html() ); //THIS ONE DOESN'T WORK?
}
});
alert(this.$el.html() ); // THIS ONE W
浏览 7提问于2014-07-16得票数 1
回答已采纳
5回答
我收到了来自这里的代码狙击手：
var CounterButton = function(el){
this.$el = $(el);
this.counter = 0;
this.bindEvents();
this.myVal = 1;
}
CounterButton.prototype.bindEvents = function(){
this.$el.click(this.clicked);
};
CounterButton.prototype.clicked = function(){
this.increase();
t
浏览 0提问于2013-03-24得票数 3
回答已采纳
我正在使用
在启动菜单后，我需要能够轻松地处理“菜单项”可能被“选中”的所有方式。通过我的框架的模板语言(vue)添加一个点击按钮是有效的，但是，添加other和其他键的方法不起作用。示例：
<li
v-for="option in options"
:key="option"
class="mdc-list-item"
@click="onChange(option)" // this works
@keyup.enter="onChange(option)" /
浏览 0提问于2019-08-20得票数 1
回答已采纳
我定义了一个Marionette视图，我需要反映模型更改事件。我的初始化函数如下所示：
initialize: function(){
_.bindAll(this,"render");
this.model.on('change',this.render);
},
稍后，我在onDomRefresh方法中定义了jquery元素初始化器。它是一个可拖动和可调整大小的元素，当您单击它时，它可以写。单击元素外部时，将保存文本。
onDomRefresh: function(){
var self = this;
if(this.$el
浏览 0提问于2014-04-01得票数 0
回答已采纳
1回答
我能在Vuex商店用这个吗？
、、、、
我使用vue-cookie和vue-resource创建项目，尝试使用this.$cookies.get('my-cookie')访问cookies，并使用this.$http.post('URL')请求API。商店无法访问this。
我在store.js中的行为：
checkCookies: () => {
if (this.$cookies.get('test') === null) {
console.log('vide')
//envoyer sur la page de co
浏览 8提问于2020-06-23得票数 1
回答已采纳
我是Vue的新手，我被要求为一些组件实现测试。这是构成部分：
<template>
<v-form>
<v-container>
<v-text-field
v-on:keydown.enter.prevent
v-model="filterName"
dense
clearable
style="transition: all 0.3s ease; width: 12rem;"
class="
浏览 19提问于2022-10-08得票数 0
回答已采纳
我只是在摸索我的脚，我想我有一个简单的问题要解决。我有以下视图，这是一个简单的选项卡，当单击它时会打开一个面板，当关闭时会返回到一个选项卡：
myApp.views.Support = {
Form: Backbone.View.extend({
initialize: function () {
this.el = $('#support');
this._ensureElement();
},
render: function () {
if (t
浏览 1提问于2013-03-11得票数 1
回答已采纳
1回答
在类星体框架中，当我单击“特定”按钮时，如何切换文件选择器q-file。
我的努力到目前为止：
当这个buton被单击时，它应该切换q-file
<button @click="toggleFileSelector">toggle file selector</button>
所以我有这个文件选择器，当我点击一个按钮时，我希望这个选项可以切换
<q-file outlined class="field" ref="myFileSelector" :label="label" v-model="
浏览 2提问于2020-10-18得票数 1
回答已采纳
4回答
我对Vue Js和Vue是新手。只是尝试验证父组件的表单输入字段，如：
父组件中的子组件：
<contact-list ref="contactList" :contacts="contacts" @primaryChanged="setPrimary" @remove="removeContact" @ready="isReady => readyToSubmit = isReady"/>
儿童中的方法：
computed: {
ready() {
return !thi
浏览 2提问于2018-12-05得票数 6
回答已采纳
1回答
我正在开发一个简单的vue模块，以添加事件到谷歌日历。一旦用户登录，我就有了一个监听器，我将调用一个方法将事件添加到日历中。为了获得gapi，我使用了这个vue库。。但是，一旦我添加了事件并尝试添加另一个事件，addEvent方法就会多次运行。例如，如果我添加一次事件，一切看起来都很好。但如果我再按一次，它会打开谷歌日历两次，并添加两次相同的事件。
<template>
<div class="row">
<div class="col-md-6 ml-5 mt-3">
<b-form>
浏览 0提问于2020-07-03得票数 2
我试图验证v-text字段是否只输入数字，但它是，不需要，但规则拒绝通过验证。
我用了v-form，v-text-field和v-text-field规则。
<template>
<v-form ref="form">
<v-text-field
v-model="name"
:label="label"
:rules="rules"
@blur="changeValue"
clearable
>&l
浏览 1提问于2019-05-30得票数 2
回答已采纳
Vue slot为开发者提供了极好的灵活性。
在插槽中进行父子通信时，使用eventbus是一种很好的方式。
但是在父级中使用$slots api时，我遇到了一些问题。
当插槽内容由指令呈现时，不会再次评估接口。
例如,
Vue.component('parent', {
template:'<div v-if="visible"> <slot></slot></div>',
data(){
return{
visible:false
}
},
浏览 1提问于2020-12-22得票数 1
有时我会犯这样的错误：
TypeError: this.$parent.test()不是函数
以下是我在父母中的方法：
test() {
console.log('test')
}
这个孩子是：
...
if (this.$parent) {
this.$parent.test()
}
我知道还有其他方法可以做到这一点，但我想知道的是，我是否可以检查这个家长是否存在！！这在vue.js中有可能吗？？谢谢
浏览 1提问于2019-11-25得票数 0
回答已采纳
1回答
当HTTP请求返回一个错误时，我试图禁用加载，但是它给了我这个错误。
Uncaught (承诺) TypeError:无法设置未定义的属性“加载”
代码
export default {
name: 'login',
data() {
return {
loading: false, //can't be set to false on request error
}
},
methods: {
浏览 1提问于2020-07-02得票数 0
回答已采纳
1回答
更改jquery移动页上的元素
、、、、
我试图更改页面init上的滑块属性：
$(document).delegate('#my-page','pageinit', InitMyPage());
function InitMyPage() {
var today = new Date();
$("#my-slider").prop({
min: 1,
max: 50
}).slider("refresh");
}
看起来就像在页面init上一样，$("#my-slider")仍然是未知的。
当我
浏览 1提问于2014-06-02得票数 0
回答已采纳
当单击顺风animate-pulse时，我有以下按钮要添加该按钮，然后在动画播放结束后删除它：
<button
class="
bg-transparent
text-black
font-bold
py-2
px-4
rounded-sm
uppercase
"
v-bind:class="{
'hover:bg-magnolia-700'
浏览 10提问于2022-01-06得票数 2
我尝试在单击Button时创建一个类的新对象，并希望将该对象存储在vuex状态中。例如，当单击按钮时，它调用方法"newMine()"：
newMine() {
this.$store.dispatch('setNewMine',"Iron")
}
在商店里，我有个动作：
import { Mine } from './modules/mine'
...
state: {
mines:[]
},
mutations: {
setNewMine(state,ore){
浏览 0提问于2020-02-26得票数 0
1回答
我有一个计算出来的Vue函数，它有一个参数。每次我尝试将它绑定到单击时，我都会收到并出错Error in event handler for "click": "TypeError: searchHashtag is not a function"。
下面是HTML：
<el-button @click="searchHashtag('#acc')">Test</el-button>
这就是逻辑：
data () {
messages: []
},
mounted () {
api.f
浏览 3提问于2017-09-26得票数 1
回答已采纳
你好，我正在使用我的网站项目，但我面临一个奇怪的问题，我自己无法解决，请参阅我的代码下面。
$.confirm({
title: 'Add Patient',
theme: 'material',
backgroundDismissAnimation: 'glow',
type:'blue',
typeAnimated: true,
content: '' +
'<form action="" class="formName
浏览 2提问于2018-01-30得票数 0
回答已采纳
我们正在触发子组件中的父组件的方法，如下所示：
await this.$refs.patientinputmask.$refs.patientpersonaldata.ChangePersonalData();
await this.$refs.patientinputmask.$refs.patientaddressdata.SavePersonalAddressObject();
await this.$refs.patientinputmask.$refs.patientbankaccountdata.SavePersonalBankAccountObject();
await this
浏览 0提问于2021-12-06得票数 0
我试图将html5画布上的图像链接到url以导航站点。
我使用Vue，FabricJS作为画布，Vue-router作为路由。
let computerClick = function (evt) {
console.log("Computer clicked");
this.$router.push('/app');
};
当在画布上单击该项时，它将运行此函数，但我得到以下错误：
未定义TypeError:无法读取未定义属性的“推送”
有人能把我引向正确的方向吗？
浏览 1提问于2017-05-24得票数 1
回答已采纳
2回答
为什么这里没有定义this？注销时，单击这是浏览器控制台TypeError: this is undefined中显示的错误 <script lang="ts">
import Vue from "vue";
import { getModule } from "vuex-module-decorators";
import Component from "vue-class-component";
import AuthModule from "@/store/auth";
import Store
浏览 27提问于2020-01-20得票数 1
1回答
我有一个功能角带旁边的自定义模板。在我的模板中有锚标签。当您单击其中一个标记时，它会关闭侧边。
我怎样才能防止侧边关闭？
谢谢!
这是我的模板：
<script type="text/ng-template" id="chart-edit-aside">
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="
浏览 1提问于2014-09-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
