我尝试在Vue中重写此JavaScript单击事件时遇到问题
在Vue中重写JavaScript的单击事件时遇到问题可能是由于以下几个原因：
- 语法错误：在重写单击事件时，可能存在语法错误，例如拼写错误、缺少括号等。可以通过仔细检查代码并使用浏览器的开发者工具来查找并修复语法错误。
- 作用域问题：在Vue中，事件处理程序默认绑定到组件的方法中。如果在重写单击事件时，没有正确绑定到组件的方法，可能会导致事件无法触发。可以使用箭头函数或显式绑定方法来解决作用域问题。
- Vue事件修饰符：Vue提供了一些事件修饰符，例如
.stop、.prevent、.capture等，用于修改事件的行为。如果在重写单击事件时，使用了不正确的事件修饰符，可能会导致事件无法正常触发。可以查阅Vue官方文档中关于事件修饰符的使用方法，并根据需要进行修正。 - Vue指令冲突：在Vue中，一些指令（如
v-if、v-for等）可能会与原生JavaScript事件冲突。如果在重写单击事件时，使用了与指令相同的名称，可能会导致事件无法正常触发。可以尝试更改事件名称，避免与指令冲突。
总结起来，解决在Vue中重写JavaScript单击事件遇到的问题，可以通过检查语法错误、解决作用域问题、正确使用事件修饰符以及避免与Vue指令冲突等方式来解决。如果问题仍然存在，可以提供更具体的代码和错误信息，以便更好地帮助解决问题。
关于Vue的更多信息和相关产品，你可以参考腾讯云的Vue.js产品介绍页面：Vue.js产品介绍。
相关·内容
3回答
在上触发单击事件时遇到问题。当调用insertIntoInsertHolder()时，它会添加一个指向div#swf_insert_holder -i内容的链接，然后在下面创建单击事件。但是，该事件不会触发。
$javascript = "javascript:;";
$swf_insert_box_link = "swf_insert_box_link";
echo "
function insertIntoInsertHolder( filename ) {
$('#swf_insert_holder').append(&#
浏览 0提问于2010-02-01得票数 2
回答已采纳
描述 我想实现一个带有复选框的表格组件。我遇到的问题是，当我单击复选框、表格行和表格单元格时，会捕捉到我想要避免的单击事件。当我单击复选框时，我只希望该复选框对change事件做出反应。 我尝试了event.stopPropagation方法，但它不起作用。不知何故，在checkbox捕获更改事件之前，当我单击checkbox时，包含该checkbox的表行和单元格会对click事件做出反应。 我怎样才能实现我想要的？请帮帮我！！ 代码 <template>
<table>
<tr @click="trClick">
浏览 13提问于2019-05-05得票数 2
2回答
我有个奇怪的任务。我只是尝试在元素单击时添加一个附加函数。我似乎无法触发在我的方法中找到的addScroll函数。如您所见，当单击按钮时，应该将div附加到屏幕上。单击该div之后，将应用remove方法，我还希望应用addScrollBack()。
new Vue({
el: "#app",
data: {
chocs: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false },
{ te
浏览 4提问于2022-01-29得票数 0
回答已采纳
1回答
我在包含JApplet的网页中侦听键盘事件时遇到问题。
网页的一半区域被JApplet占据。另一半是HTML。
我这样定义我的javascript事件处理程序：
function keyPressedTest(){
alert("key pressed!!!");
}
function initListener(){
document.onkeypress = keyPressedTest;
}
当我单击页面的HTML部分时，Javascript键盘侦听器工作正常。问题是当我点击Applet时，javascript侦听器不会在按键时被调用。
我也尝试过使
浏览 2提问于2012-12-14得票数 0
回答已采纳
在VSCode中使用Vue.js时遇到问题。
当我使用VSCode键盘快捷键来注释代码时，它总是使用"//"，甚至在模板(而不是)或样式标签(而不是/* */)中也是如此。
我正在使用Vetur，并且我用更漂亮的扩展配置了它。
这是我的settings.json：
{
"eslint.validate": [
"javascript",
"vue"
],
"[html]": {
"editor.defaultFormatter"
浏览 12提问于2020-11-20得票数 1
我想防止页面重新加载后，单击确定警告框。单击“搜索”按钮即可。但现在我在enter key down事件中遇到问题。谁来帮帮我。
这是我的html
<div id="email">
<input type="text" id="txtSearchEmail" name="email" onkeydown="Javascript: if (event.keyCode==13) {JS_Search(); event.preventDefault();}" style="width: 161
浏览 3提问于2012-06-15得票数 1
3回答
我在提交表单和Javascript确认时遇到问题。基本上，当按下"submit“按钮时，将调用以下Javascript。
function confirmation() {
var answer = confirm("Are you sure you wish to edit?")
if (answer)
{
window.location = "#editform2";
}
}
但是，当我点击cancel而不是ok时，Javascript会正确执行，因为我查看了地址栏，它不会更新为#editform2。但
浏览 0提问于2009-08-31得票数 4
回答已采纳
我在使用v-if显示组件时遇到问题。在一个组件中，我使用了<div v-if="seen">...</div>。在另一个组件中，我有<button v-on:click="seen = !seen">...</button>。在"var vue = nev Vue({...})“文件中，在data中:我已经看到: true，但这不起作用。 我找到了有效的“解决方案”：example和我在代码中尝试了这个“函数版本”的数据，但它也不起作用:/ 下面是我的代码:主文件 var vue = new Vue({
浏览 22提问于2019-05-08得票数 0
回答已采纳
1回答
我在尝试路由到新页面时遇到问题，我想在单击"HEREEEEEEEEEEE“按钮时路由到passe.js，但它不起作用！注意pass.vue在"components“文件夹中
<template>
<v-app>
<div>
<v-toolbar dark prominent src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg">
<v-app-bar-nav
浏览 1提问于2020-03-26得票数 0
我有一份物品清单。当单击一个按钮时，我使用javascript显示更多信息的下拉列表。
javascript适用于初始项目，但当我使用ajax动态加载此页面上的新项目时，它会停止。
此时，Javascript被放在页脚中。我尝试将它放在代码中的不同位置，但都无济于事。控制台中也没有显示任何错误。
我在这里遵循w3schools accordion教程()，我使用的是Meta Fizzy ()的无限滚动。
HTML
<ul class="item-listings">
<li class="item">
<button class=&
浏览 0提问于2019-08-17得票数 1
请帮帮忙。我已经使用Vue Tables 2>2年了，而且我从来没有遇到过这个问题。我的桌子和往常一样完美，但现在每当我点击一个单元格时，它就被铬上的蓝色轮廓和火狐上的虚线所包围。它表现出的行为与我单击输入的行为相同。我逐一检查了Vue表中的两个选项，依次禁用了每个选项，但没有改变行为。我查看了引导4表文档，但是找不到与选项相同的行为，所以我认为是vue表在做这件事。Vue表2页上的演示小提琴也有此行为。这很让人分心，我正努力让它停止。
我的目标是让表显示它以前的行为，即单击单元格时什么也不做。
我使用的是Bootstra4.4和Vue-Tables 2版本1.6.25
我的选项数组看起
浏览 3提问于2020-02-17得票数 0
回答已采纳
2回答
当我单击该按钮时，会打开多选。但当我再次单击该按钮时，true / false值闪烁，结果，true仍然是true。我做错了什么？
模板：
<div id="app">
<button @click="toggle">open and close later
</button>
<pre>{{ isOpen }}</pre>
<multiselect
ref="multiselect"
v-model="value"
浏览 36提问于2020-02-19得票数 1
回答已采纳
我得到了这个HTML元素：
<div class="list-group">
<a href="javascript:;" @click="showDetails(notification, $event)" class="list-group-item" v-for="notification in notifications" :key="notification.id">
<h4 class="list-group-item-hea
浏览 1提问于2018-05-03得票数 48
回答已采纳
1回答
我是Vue的初学者，我正在尝试了解如何使用自定义组件。我有一个简单的Vue应用程序，如下所示：
.html
<div id="app1">
<button
v-for="(button, index) in buttons"
v-bind:key="button"
v-on:click="buttonClick(index)"
>
{{ button }}
</button>
</div>
.js
const app1 = ne
浏览 0提问于2018-08-13得票数 0
回答已采纳
当一个链接被点击时，我正在尝试添加声音到我的网站。我将这个javascript添加到我的文档的头部：
<script language="javascript" type="text/javascript">
function playSound('Swoosh 3-SoundBible.com-1573211927.wav') {
document.getElementById("dummy").innerHTML=
"embed src=\""+soundfile+"\"
浏览 0提问于2011-05-17得票数 0
3回答
让两个文件组件相互通信。
、、、
如何让两个单一的文件组件相互通信。
例如:我有两个文件组件。Content.vue与Aside.vue
我如何创建这样的东西，当我单击Aside.vue内部的一个按钮，它将在Content.vue中更新
以下是两个文件组件在index.html中的外观：
<div class="container articleContainer">
<article-content></article-content>
<article-aside></article-aside>
</div>
浏览 15提问于2017-10-18得票数 2
回答已采纳
29回答
如何检测元素外部的单击？我使用Vue.js，所以它将在我的模板元素之外。我知道如何在Vanilla JS中做到这一点，但我不确定当我使用Vue.js时，是否有更合适的方法来做到这一点？ 这是Vanilla JS的解决方案：Javascript检测div外部的单击事件 我想我可以使用一种更好的方法来访问元素？
浏览 290提问于2016-03-23得票数 163
回答已采纳
我在访问我的Vue应用程序中的Blockly组件生成的javascript代码时遇到问题。我可以通过多种方式对工作空间进行console.log，但是在尝试生成javascript代码时，工作空间是未定义的。除此之外，Blockly工作得很好。
// Set workspace with reference to div and xml
this.workspace = Blockly.inject(this.$refs.blocklyDiv, {
toolbox: this.$refs.tools
});
// another way to access the workspace
v
浏览 0提问于2018-02-08得票数 0
我能从外部javascript访问Vue组件、数据属性和方法吗？我正在尝试创建一个混合应用程序，其中屏幕的一部分是Vue组件，我想在单击按钮时调用该组件中的一个方法，该方法由纯js处理。有没有办法做到这一点？
谢谢!
浏览 0提问于2018-05-31得票数 5
我有一个div，它通过使用jquery切换键出现并消失。当yuo单击链接时，div就会出现或消失。
如果javascript被禁用并且用户单击链接，那么是否有一种方法可以使其变为页面呢？
在使用切换键以确保它不会遇到问题时，我应该做些什么呢？
浏览 3提问于2013-10-13得票数 0
回答已采纳
1回答
我在Vue3应用程序中使用keycloak.js时遇到问题 const keycloak = Keycloak(keycloakOptions)
keycloak.init({
onLoad: 'login-required',
checkLoginIframe: false
}).then(async (auth) => {
if (!auth) {
window.location.reload()
} else {
const app = createApp(App)
app.provide(process.env.VUE_
浏览 56提问于2020-11-26得票数 1
1回答
我在vuejs绑定数据的方式上遇到了问题。我有一个父Vue.component，它处理表单的布局，还有一个子vue.component，它处理不同的输入组。我很难从子组件中获得数据，以便将来提交表单时与父组件同步。
我目前的文件如下：
var title = "";
Vue.component('create_new_entry', {
template: '<div><div class="row"><h1 v-on:click="test()">{{title}}</h
浏览 2提问于2017-12-27得票数 4
回答已采纳
1回答
我是Vue的新手，有些非常基本的东西我搞不懂。
一个文件Vue组件如何在javascript代码中调用自己的方法？一个文件父组件如何在javascript代码中调用子方法？
问了许多类似的问题，比如，但它们都给出了创建Vue主应用程序对象的示例。在我的例子中，它隐藏在生成的样板代码的main.js中，我假设它应该保持原样(假设可能是错误的)。
给定以下Vue教程中的简单模板--我如何在javascript代码中调用doStuff方法(虽然它似乎是一个单击处理程序，但它似乎是未定义的)--我如何调用HelloWorld方法。
<template>
<div id="
浏览 1提问于2019-10-16得票数 1
我希望稍后动态更新下拉区域组件的url选项。
以下是我所拥有的Vue组件：
<div id="app">
<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
<button @click="updateUrl()">
Update
</button>
</div>
<script>
ne
浏览 0提问于2018-12-20得票数 1
回答已采纳
1回答
我在向Vue.js 2.2中的组件传递对象数组时遇到问题。
这是我的组件
<vue-grid :fields = "[
{name: 'Person Name', isSortable: true},
{name: 'Country', isSortable: true}]"
></vue-grid>
它不起作用，因为它在浏览器中呈现大括号。
我尝试过在对象中去掉引号"，在fields属性前面去掉冒号:。这些也都不起作用。但是，如果我只传递一个有效的简单字符串。我不知道为什么对象不工作。
我找到了一个类似
浏览 4提问于2017-04-09得票数 7
回答已采纳
1回答
当用户单击表单元格时，Vue应该知道它的值。在本例中，我尝试设置一个事件并传递该值。
我有没有办法写得更好，也许是从Vue本身--例如，当单元格第一次被单击时，获得它的内容？我在表格中有许多单元格，这不起作用，只有当我删除PHP部件并尝试手动编写它时才能起作用- @click="calculate_price(10)
<?php foreach ($tr as $td) : ?>
<td @click="calculate_price(<?php echo $td['price']; ?>)">
浏览 11提问于2017-07-21得票数 0
回答已采纳
假设一个人来自jQuery世界。如果有一个组件myPlugin (例如，在特定DOM元素上悬停时显示工具提示的组件jQuery插件)，它将启动如下所示：
$('.tooltipClass').myPlugin( { // options object here } )
此代码将选择具有类tooltipClass的所有元素，并将myPlugin应用于它们。
在Vue.js中，它是不同的，而且文档并没有真正清楚地说明这一点。我们有
let x = new Vue({
el: '#app',
...
})
然后我们读到(在中)：
为Vue实例提供要挂载的
浏览 4提问于2021-11-25得票数 0
我在访问beforeEnter函数中的“Vue”时遇到问题。
当会话到期时，我有一个小的toast显示，告诉用户重新登录。
当toast包含一个按钮时，当单击该按钮时，我希望触发另一个模式，以允许用户登录。这包含在'Vue‘中，作为sperte组件。
如何访问'Vue‘('this')来触发模式？
我已经尝试过了；this.app和this.a.app -以及其他在SO和其他地方列出的列表，都是有用的。
谢谢。
路由
{
path: "/dashboard",
name: "dashboa
浏览 2提问于2020-11-21得票数 0
1回答
Vue.JS发出本机DOM事件
、、、、
我有一个自定义的checkbox组件，它由一个经典的checkbox和一个标签组成。您可以单击复选框或标签来切换状态。 ? 我想发出一个本机onchange event，这样我就可以在远方的div祖父母上做一个v-on侦听器。我用于实际复选框的输入正确地发出了一个本机onchange事件，但是我无法在单击标签时手动发出一个冒泡的本机onchange事件。我尝试过this.$emit('change')和this.$emit('onchange')，它们都不像原生DOM事件那样的气泡。 下面是一个简单的例子： <!-- Form.vue -->
浏览 26提问于2021-03-30得票数 0
我是javascript和Vue.js的新手。我正在尝试将vue-bootstrap切换到vuetify。我想做的是在单击下拉项时调用一个方法。 我之前使用vue-bootstrap的代码是这样的。 <! -- This part is inside for loop -->
<b-dropdown variant="transparent">
<b-dropdown-item @click="aMethod(index, 'Hello')">A</b-dropdown-item>
浏览 7提问于2019-04-08得票数 0
2回答
我在尝试创建一个可以从文件夹下载文件的页面时遇到问题。在页面中，我可以显示列表中的文件列表，但当我单击下载链接时，什么也没有发生，并且我无法下载这些文件。下面是我的代码：
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid();
}
}
public override v
浏览 0提问于2016-05-10得票数 0
在我的一个组件中加载文件时遇到问题。在我使用getElementById()迁移到Vue之前，它是有效的。下面是我尝试过的:在模板中：
<input type="file" accept=".obj" id="file" ref="OBJImport" name="objFile" @change="loadFileAsText()" single />
在数据中：
data(){
return {
files: []
}
}
在方法中：
methods
浏览 10提问于2019-11-06得票数 0
回答已采纳
在Aspnet中使用onclick="javascript:history.back();“时遇到问题。在第一页中，我填写了一些数据并单击搜索按钮，它显示了一些结果，我单击了导航到第二页的详细信息的特定结果，但当我单击自定义后退按钮时，它会刷新页面并将所有数据设置为初始值，当我使用onclick=“javascript:history.back()”时；我什么也得不到，但页面显示“网页已过期”。
提前感谢！
浏览 7提问于2011-01-05得票数 0
回答已采纳
1回答
我使用vue -加载程序来帮助我安装vue和webpack，我有一个名为App.vue的文件。
在App.vue中，我添加了一个名为小部件的组件。如果我单击某个按钮，就会有一个设置btnClicked = true的函数，因此小部件就会出现
<widget v-show="btnClicked"></widget>
但是我也希望这个函数能够访问widgetShowMe，它是我组件中的一个属性。
我希望在我的App.vue中激活的函数也能设置App.vue，我尝试过这样做，但是它没有工作
methods:{
btnClickedFunc () {
浏览 1提问于2017-03-06得票数 1
回答已采纳
2回答
我有一个问题，如何添加样式到ul内，用Vue JavaScript点击li。我的html代码：
<ul>
<li>Menu</li>
<li @click="toggleSubMenu">Profile
<ul> //Add class here
<li>History</li>
</ul>
</li>
<li @click="toggleSubMenu">Media
浏览 9提问于2022-09-22得票数 0
回答已采纳
1回答
我很难理解如何呈现父组件，如何在页面的一部分列表中显示契约列表，当用户单击其中之一时，在页面的另一部分显示特定契约的详细信息。
这是我纤细的档案：
#contracts_area
.filter-section
ul
li.filter-item v-for="contract in contractsAry" :key="contract.id" @click="showContract(contract)"
| {{ contract.name }}
.display-section
c
浏览 4提问于2017-09-23得票数 1
回答已采纳
有人能帮我做装潢师“模型”和“发射”吗？我正在尝试更改组件中单击的顺序，并使用这里的文档：。这是我的代码：
<template>
<button @click="onSortClick">Sort</button>
</template>
<script lang="ts">
import Vue from "vue";
import { Emit, Componet, Model } from "vue-property-decorator";
export
浏览 4提问于2019-10-24得票数 2
回答已采纳
vue.js新手，在访问Vue方法中的Office对象时遇到问题。
正如您在下面看到的，从created调用load()可以很好地工作，但是从this.loadProps()调用它就不行了。
var vm = new Vue({
el: "#app",
data: {
subject: "",
},
created: function () {
Office.initialize = function (reason) {
var element = document.querySelector('.ms-Me
浏览 4提问于2018-01-25得票数 0
在Vue.js 2中，当我向一个元素添加一个@click事件并尝试单击某些东西时，该事件直到我完成单击(按下-> up)后才会触发。
如何在鼠标按下后立即触发事件？
示例：
<div @click="foo()">
Hello
</div>
浏览 6提问于2017-02-06得票数 21
回答已采纳
我被一个经过的Vue组件卡住了。 当调用Vue组件中的单击事件时，我希望将Vue组件传递给其他组件。我尝试了'this‘，但它返回null。 如果有人能帮我的话。这是我的代码。提前谢谢。 <template>
...
<button type="button" class="confirmBtn" @click="$util.routerReplace(this, '/')">
<span>confirm</span>
</button>
...
&
浏览 22提问于2019-03-01得票数 2
1回答
我在创建完整日历中的位置时遇到了一些问题，为此我使用了vue js，但这是我第一次使用vue js和全职日历。我的问题是我可以在日历中创建事件，但是事件不是在我单击的日期创建的，而是在今天的日期创建的。我给人的印象是我做得不对，因为事件创建方法使用的是javascript，而不是vue。那么，有人能帮助我正确的方式，如何创建事件吗？
<div class="schedule-calendar bg-light card p-5">
<FullCalendar :options="calendarOptions"
浏览 3提问于2022-10-06得票数 0
回答已采纳
1回答
请原谅我问这个愚蠢的问题，因为我仍然是Vue，Vuetify和Javascript的新手。 我在主页上显示了Vuetify - https://vuetifyjs.com/en/components/date-pickers/#usage，想知道当用户单击特定日期时是否可以打开模式/对话框- https://vuetifyjs.com/en/components/dialogs/。 我已经创建了Dialog组件，并在单击日期时设法打开了一个Alert。 任何帮助或指向正确的方向都将非常感谢。 谢谢
浏览 11提问于2021-07-13得票数 0
回答已采纳
我使用了QT示例: appchooser。我计划用它来实现工具栏。我对它进行了修改，它工作得很好。
我在捕捉单击事件时遇到问题。我试过了，但我没有得到解决方案。请帮我解决这个问题。
对于单击项目，我需要调用ItemClicked()方法
项目源代码。
请帮我找出解决方案。
浏览 2提问于2010-12-24得票数 3
我有一个，它可以通过单击子组件中的一个按钮来打开。
因此，我将v-model="drawer"更改为简单的value="drawer"，否则我会收到一个关于突变道具的警告，这是有意义的(感觉像是在做一些肮脏的、角度的、双向的数据绑定^^)。
下面是代码：
layouts/default.vue
<template>
<Header :toggleLeftMenu="toggleLeftMenu" />
<LeftMenu :show="showLeftMenu" :toggleLeft
浏览 10提问于2022-01-12得票数 1
回答已采纳
2回答
子组件如何将其值传递给父组件？下面是我的子组件：
Javascript：
new Vue({
el: '#table-list',
data: {
tableList: ['Empty!'],
tableSelected: ""
},
methods: {
getTableList() {
axios
.get('/tables')
.then(tableList => {
this.tableList = tableLi
浏览 0提问于2017-08-21得票数 1
4回答
我试图使用$emit和$on在两个组件之间进行通信。
我无法在两个组件之间进行通信，也无法从组件-A中的单击事件中更新组件-B中的highcharts-chart。
组件的JavaScript代码-A：
import Vue from 'vue';
const bus = new Vue();
const pause = ms => new Promise(resolve => setTimeout(resolve, ms));
export default {
data: () => ({
active: [],
avatar:
浏览 0提问于2019-01-12得票数 0
我是vue js的初学者。我目前面临着外部javascipt在更改路由时停止的问题。 例如，当我从/(根页面)开始，然后单击/shop，然后单击back /(根页面)，外部javascript停止工作(例如.幻灯片放映停止)。 我尝试使用一个名为vue- plugin -load-script的插件。为了在main.js中动态加载外部javascript，但结果仍然是一样的，外部javascript在改变路由时停止工作。 外部javascript被放置在index.html中 index.html <html>
<body>
...
</body>
浏览 15提问于2019-06-27得票数 2
我见过，并尝试了this.$parent和this.$root的替代方案，但都没有用。情况如下。
App.vue
<template>
<div id="app">
<global-notifications/>
<router-view></router-view>
</div>
</template>
<script>
import GlobalNotifications from "./components/Global
浏览 24提问于2018-06-15得票数 1
我正在构建单个SPA应用程序，并且在部署过程中遇到问题。我将每个应用程序部署到一个子目录( app -bar-mf、products-mf等)中，并在base中部署root-config (主应用程序)。 当在本地工作时，每个应用程序都通过它自己的服务器(localhost:9000、localhost:9001等等)提供服务，所以这里没有子目录。 当我尝试部署时，publicPath没有被使用，资产是通过"/img/foo.png“而不是"/products-mf/img/foo.png”提供的。 如果我在main.js中设置了__webpack_public_path__
浏览 228提问于2021-02-10得票数 0
我在从DataGridView中删除行时遇到问题。我和客户有DataGridView。当我单击row时，新表单打开(带有客户端数据)。在此表单中有一个'delete‘按钮，其中单击Sub是以下代码：
Form1.DataGridView1.Rows().RemoveAt(_personIndex)
问题是这段代码不能工作。我以与datagridview相同的形式尝试了这段代码，它起作用了。如果你能帮忙，我将不胜感激。
浏览 0提问于2012-10-06得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
