1回答
下面的代码实际上是在每个按钮上播放声音，用vue.js点击。
当DOM准备好而不是单击按钮时，如何检测键盘按下和播放声音？
例如，在输入播放声音v-on:keyup.13="playSound('path/to/mp3')"
Vue文档主要解释html属性，我想这可能需要在JS中完成。我是Vue.js的新手
关于Vue.js的文档
见。
new Vue({
el: '#app',
data: {
text: ''
},
methods: {
playSound (sound) {
if(
浏览 0提问于2018-05-11得票数 1
回答已采纳
我有一个Vue.js应用程序，有一个按钮，中间有一个矢量图标。我想在点击那个按钮的时候眨眼。 代码如下所示： up (event) {
event.currentTarget.style.background = 'blue'
setTimeout(() => {
event.currentTarget.style.background = '#fcfcfc'
}, 100)
}, 问题是，当我点击按钮时，它会绘制成蓝色，但它不会使用setTimeout重新绘制。 我哪里做错了？
浏览 24提问于2019-09-10得票数 0
回答已采纳
我开发了登录应用程序，运行良好，但我想让它更方便。当我集中在密码输入区域并点击键盘中的Enter Button时，我想要做这件事，应该点击Login按钮。
但是现在我必须用鼠标单击按钮或单击选项卡键并输入。
我在网上搜索，这看起来很容易，但我不知道如何应用我的条件。
问题是我把登录按钮放在另一个组件vue文件中。
main.vue
<div class="form-item">
<label>ID</label>
<input type="text" class="input-form"
浏览 3提问于2021-03-31得票数 1
回答已采纳
我在vue.js中有一个globalEventBus，我可以将它注入到其他组件中，以捕获自定义事件并对其做出反应……然而，我有一个问题，一些事件来自vue.js组件，一些事件来自全局窗口对象……
globalEventBus.js:
import Vue from 'vue';
import { mapActions } from 'vuex';
export const eventBus = new Vue({
methods: {
...mapActions(['handlePivotItemClick', '
浏览 0提问于2020-04-07得票数 0
我使用vibed服务器。它使用Pug预处理器(以前称为Jade)。这是我的页面代码：
doctype html
html
head
script(src="https://unpkg.com/vue")
script(src="app.js")
title Hello, World
body
h1 Hello World
#app
|{{message}}
它生成下一个HTML输出：
<!DOCTYPE html>
<html
浏览 4提问于2017-07-24得票数 0
回答已采纳
在CreateEntryStepper.vue中，我有一个按钮，当按下该按钮时，将调用CreateEntryStepperImageUpload.vue中的函数来激活该按钮 我知道我必须使用事件总线，但我真的不知道我需要传递什么以及如何让它们工作 bus.js刚刚有 import Vue from "vue";
export const bus = new Vue(); CreateEntryStepper.vue (不确定在这里发出什么) import { bus } from "@/components/wizard/bus.js"; async
浏览 9提问于2019-04-28得票数 0
回答已采纳
我正在用Vue.js做一个PhoneGap/Cordova项目。我有两页:第1页包含项目列表，第2页是项目的详细版本。第2页也包含各种链接。
我有报告说，在某些情况下，当用户点击列表项目(第1页)中的不同位置时，该点击会在目标页面(第2页)上执行一个抽头。
因此，在中，用户点击位置T1，页面会很快闪到第2页，然后转到链接1，T2转到链接2，T3转到链接3。
有什么好主意吗？我如何减轻这个问题？
浏览 1提问于2019-03-04得票数 0
回答已采纳
我有一个组件Abc.vue，我想从这里发出事件并侦听js文件，而不是在其他组件中，我如何做到这一点？
<template>
<div class="hello">
<div>
<input v-model="clickCount" placeholder="edit me" v-on:change="emitGlobalClickEvent()">
</div>
<TestWorld></TestWorld>
浏览 0提问于2018-04-08得票数 1
回答已采纳
1回答
从本质上讲，我希望我的Vue实例对点击上传的缩略图做出响应。
我使用的是和文档中的模板布局(参见问题的结尾)。上传图片时，会输出如下所示的树：
<Root>
<Gallery>
<Thumbnail>
</Gallery>
</Root>
来自jQuery的背景，我真的不知道‘正确’的方式去做这件事，因为缩略图模板已经由包定义，所以我没有创建我自己的缩略图模板。我知道我可以像这样访问元素：
let thumb = this.$el.querySelector('.vue-fine-uploader-t
浏览 1提问于2018-11-13得票数 0
1回答
每当用户“选择”输入文本字段时，我都需要调用一个函数，这意味着他们可以在其中键入内容。目前我正在使用点击作为触发器，但它对我来说，用户也可以Tab键进入该领域。对于用户选择输入字段，哪个是更通用的触发器。
例如，使用vue.js
<input type='text' @click='certainFunction'>
// @click doesnt respond to tabbing into the input field.
// What should replace @click?
浏览 1提问于2018-02-27得票数 0
1回答
我们使用的是
在我们的Main.js
import Simplert from 'vue2-simplert-plugin'
Vue.use(Simplert)
在xxx.vue文件中，我们可以调用
var infoMessageBox= {
message: "",
type: 'info',
onClose: this.onClose
};
this.$Simplert.open(infoMessageBox);
这可以正常工作。
现在，棘手的部分来了。我们将调用调度(Action )方法。下面的代码是示例：
var reques
浏览 1提问于2018-02-01得票数 1
回答已采纳
2回答
我正在尝试创建一个从Source.vue发出的全局事件总线，以便在Destination.vue中捕获。当捕捉到事件时，后一个组件必须运行函数。
Source.vue
.then(() => {
eventBus.$emit("fireMethod");
})
Destination.vue
updated() {
eventBus.$on("fireMethod", () => {
this.reqMethod();
});
}
main.js
export const eventBus = new Vue();
我还在这两
浏览 70提问于2020-02-12得票数 0
回答已采纳
我尝试使用Vuex存储来保存变量，该变量将控制v-navigation-drawer组件是否打开/可见。原因是我想知道nav-drawer是否从其他一些组件打开，并有条件地将类应用于某些元素。我的App.vue中的一些代码 <v-navigation-drawer app v-model="this.$store.state.showNavDrawer" ...
...
<v-app-bar-nav-icon @click="toggleNavDrawer"></v-app-bar-nav-icon>
...
methods: {
浏览 13提问于2020-12-07得票数 0
回答已采纳
我读到过jQuery和Vue在一起工作得不太好。)。由于我有一个大型的jQuery应用程序，我正在逐步将Vue融入其中，我想了解引擎盖下面发生了什么，这样我就可以避免冲突了。
下面是一个简化的测试页面：
$('#a').click(function() {
alert('a');
});
$(function() {
$('#b').click(function() {
alert('b');
});
});
var app = new Vue({
el: '.container',
浏览 2提问于2018-11-09得票数 0
回答已采纳
我正在尝试执行源代码中的，但它不起作用。
但是事件是发送的，但从未收到。
下面是我能做的最简单的例子：
在bootstrap.js中：
window.events = new Vue();
window.flash = function (message, level = 'success') {
console.log('emit'); // This is working
window.events.$emit('flash', { message, level });
};
Vue.component('flas
浏览 3提问于2017-10-11得票数 4
回答已采纳
假设一个人来自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
1回答
我想在Vue.js中做一个明星级组件，现在的问题是，在我点击星星之后，它会在显示最终结果之前消失。下面是JSFiddle链接：
这与我大部分复制代码的效果不同：
我想这与rating属性有关。
现在我已经绑定了类内嵌的:class="{selected: ((value >= rating && value != null))}。
但是我想将它绑定到像:class="selected: someFunction(rating)"这样的对象中，然后在计算属性中或者在html之外的其他地方编写someFunction(rating)。有什么办法能做
浏览 3提问于2016-12-25得票数 2
回答已采纳
1回答
我正在使用Vue2和Boostrap-vue制作一个模态组件，下面是代码 我通过了以下道具@backdrop="handleBackdrop" <template>
<b-modal
v-model="showModal"
id="modal"
@backdrop="handleBackdrop"
@ok="handleBackdrop"
>
...
</template>
<script>
data() {
retur
浏览 19提问于2019-09-12得票数 3
回答已采纳
1回答
我有一个包含各种页面的vuejs项目：
study.vue
result.vue
我的客户想要我添加Google Tag Manager代码，以便他们可以使用谷歌分析跟踪。我应该将代码添加到我的.vue文件中吗？或者我应该把它添加到index.html中
Update01
到目前为止，我就是这样做的：
我将Google Tag Manager代码添加到index.html中。
我安装了。
我有app.js和bootstrap.js。基本上，bootstrap.js将添加我的所有其他js框架。比如lodash.js或jquery.js。我将vue-gtm中的示例代码添
浏览 2提问于2017-11-01得票数 0
我正在处理一个Vue.js项目，当我单击一个元素时，我使用Vue转换标记将其淡出。问题是，由于元素正在逐渐消失，它仍然是可点击的，这在我的应用程序中可能会引起问题。
我的问题是:如何使一个元素在转换过程中不可点击，这样用户就不会在转换结束之前多次单击它？
我已经尝试过在转换开始时将带有point-events: none；的css类应用到元素的右侧，但它并没有在转换期间停止单击。
示例：
<transition name="fade">
<div v-if="shouldShow" @click="doSomeAction"
浏览 0提问于2019-07-26得票数 2
回答已采纳
1回答
我正在使用Bootstra5.1或4.6 (这两个版本都不起作用)和Vue.js 2。
我需要以下功能:我想点击一个带有折叠函数的按钮。
现在，我的第一个Vue组件中有以下代码：
<template>
<!-- Menu class for first process -->
<div class="row mt-5 mb-3">
<div class="col-12">
<!-- collapse -->
<a class="btn btn-secondary
浏览 4提问于2021-09-10得票数 0
回答已采纳
2回答
首先，我有一个Vue JS文件--
export var myVue = new Vue({
el: '#myApp',
data: {
myCoordinates: new Set() // simple integers
},
methods: {
addCoordinates (c) {
this.myCoordinates.add(c);
}
}
}
然后我有另一个JS文件，它导入了Vue并做了一些绘图--
import { myVue } from '
浏览 5提问于2018-06-17得票数 0
突然，发射器停止工作：
event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
import { EventBus } from '../event-bus';
...
mounted() {
this.getCart();
}
...
methods: {
getCart() {
axios.get(`${app.api_erp_url}/cart/${this.cartId}`).then((response) => {
浏览 6提问于2020-10-30得票数 1
回答已采纳
首先，我使用Vuejs和电子，package.json将在这篇文章的末尾。
我试图使用这个侦听器来显示我的窗口，正如电子文档所建议的那样。
win.once("ready-to-show", () => win.show());
但是，似乎只有当我手动获得变量win并调用函数show()时，才会触发。
下面是我的background.js (运行电子主进程的文件)和windowManager.js文件(我为构建窗口并返回它们而创建的文件，我将这个文件导入background.js)
//background.js
"use strict";
import
浏览 1提问于2021-06-02得票数 1
我将Vue.js (2.6)与DataTables.js结合使用，并试图捕获。
数据表中的页面更改事件名为page.dt (与所有Datatables事件一样，它在点后面有名称空间dt )。
如果我试着按照文档来做，它就不起作用了。
我猜它不起作用，因为Vue使用事件名称中的点来定义事件修饰符，例如click.once
我的问题是：有没有办法用Vue?这个名字中的点来捕捉这样的事件？
下面是HTML指令：
<table class="table" id="dataTable" v-on:page.dt="pageChange">
这
浏览 7提问于2020-10-16得票数 1
回答已采纳
1回答
我有一个包含一些元素的svg，完整的代码在这里的中，飞机图像是通过transform属性定位的，这样它就会落入href2的image中。问题是Vue无法检测到飞机图像上的点击事件。我似乎找不到解决这个问题的办法。我希望能够将事件侦听器附加到飞机图像，而不管屏幕上的位置。
在jQuery中，解决这类情况就像一阵微风，但使用Vue似乎就是另一回事了。
这是HTML
<div id="app">
<svg xmlns="http://www.w3.org/2000/svg" width="1015px" height="5
浏览 3提问于2017-10-11得票数 0
1回答
我在Vue.js中有一个具有数据的表，我想在最后一个单元格中添加一些“操作单击”。
这是我的表格模板：
<BootstrapTable :columns="table.columns" :data="table.data" :options="table.options" v-if="table.ready">
以及数据：
this.table = {
ready: false,
columns: [
{
field: 'id'
浏览 3提问于2019-10-07得票数 3
回答已采纳
我有一个Vue.js组件App.vue，我想用@click和v-if，v-else指令相结合来动态地附加/分离组件。我还想要的jQuery动画卷轴。这是我的代码： <template>
<div class="container">
<RingsProduction v-if="flag"></RingsProduction>
<RingsGuide v-else></RingsGuide>
<nav @click="s
浏览 71提问于2019-02-18得票数 0
回答已采纳
在我的Nuxt应用程序中，我有一个监听鼠标事件的画布。现在我想把这些鼠标事件发送到DOM，一切都很正常。但我担心Vue的活动太多了，因为有成千上万的活动。当我切换到Vue dev工具时，我的电脑已经开始卡顿了。我觉得Vue只适用于简单的点击事件，但我经常使用它。有没有更好的方法来处理这个问题？
init(){
document.addEventListener("mousemove", this.mouseMove.bind(this));
}
mouseMove(e){
EventBus.$emit("MOUSEMOVE", e);
}
浏览 41提问于2020-05-31得票数 0
4回答
完全与Vue js -位置被擦除
、、、、
我正在尝试使用jQuery geocomplete和Vue.js来用geo数据填充表单。
我的代码包含以下表单：
<form>
<label for="get-offer-location">location: </label><input id="get-offer-location" v-model="newoffer.location" type="text"/>
<div style="visibility:hidden">
浏览 12提问于2017-01-06得票数 2
回答已采纳
1回答
我有一个组件，我想在不同的页面上使用。嗯，在第一次切换之前，它工作得很好。它显示的像以前一样，但是当我单击“关闭”按钮时，它就关闭了，但是控制台输出：
Vue警告:避免直接变异一个支柱，因为每当父组件重新呈现时，值都会被覆盖。相反，使用基于支柱值的数据或计算属性。道具变异：“可见”
找到位置
--> at src/components/Snackbar.vue at src/view/Login.vue
在那之后，它不会出现在点击
有办法解决这个问题吗？
Snackbar.vue
<template>
<v-snackbar v-model.sync=
浏览 0提问于2018-06-16得票数 7
回答已采纳
我试图在一个requestPointerLock()组件中使用Vue.js。如果我的组件的pointerShouldLock数据项是true，指针应该在beforeUpdate()生命周期挂钩期间被锁定。我的代码如下所示：
beforeUpdate() {
if (this.pointerShouldLock) {
const gameScreen = document.getElementById('game-screen')
requestPointerLock(gameScreen)
}
}
requestPointerLo
浏览 6提问于2017-11-24得票数 0
回答已采纳
1回答
我已经实现了点击外部指令关闭边栏。指令运行良好，但侧栏的内容(任何单击事件都不会触发)。如何停止传播该事件？
这里是我的clickoutside.js
import Vue from 'vue';
const nodeList = [];
const ctx = '@@clickoutsideContext';
let startClick;
const counter = 0;
const isServer = Vue.prototype.$isServer;
/**
* added this on event function for di
浏览 3提问于2021-03-10得票数 1
我正在尝试创建一个带有空new Vue实例的事件总线。该应用程序足够大，可以分成多个文件为组件。例如，我的应用程序的结构如下：
main.js
import Vue from vue;
window.bus = new Vue();
Vue.component('update-user', require('./components/update-user');
Vue.component('users-list', require('./components/users-list');
Vue.component('
浏览 5提问于2016-07-22得票数 3
回答已采纳
我想要的是：我有两个组件，父组件(Wall.vue)和子组件(PostItem.vue)。每PostItem有一个删除按钮。单击时，将发送对我的API的请求，并从数据库中删除该项目。然后我想调用 getPosts父组件的函数来再次获取所有帖子(这次没有删除的帖子)。 问题：在子组件中，我无法访问this.$parent对象(或者更具体地说，它只是空的，不包含函数)，所以我不能调用getPosts-Function。当我删除包围子组件的父组件中的时，一切工作正常。 这里的问题是什么？ 父组件(Wall.vue) 模板部分： 脚本部分： import { mapGetters } from &#
浏览 30提问于2021-02-24得票数 3
回答已采纳
1回答
我试图建立一个弹出模式，我不想通过点击模式窗口外关闭模式。我在背景下搜索和尝试过不同的解决方案，但似乎没有什么效果。会很感激你的帮助！我对模态的代码是：
<template>
<div>
<transition name="modal">
<div v-if="isOpen">
<div class="overlay" @click.self="isOpen = false;">
<div class=&#
浏览 2提问于2020-01-03得票数 0
回答已采纳
我正在把vue应用程序加载到iframe中。我有一个简单的脚本来创建iframe并将vue包添加到其中。这在Chrome、Safari和FF中运行得无懈可击，但在IE Edge的iframe上反复触发onload事件，导致我的vue应用程序一直在重新加载。 我尝试在第一个onload事件后设置一个变量isLoaded，以防止进一步的onLoads，但这样应用程序根本不会呈现。 首先，脚本创建框架： this.iframe = d.createElement("iframe");
this.iframe.id = "FrameID";
this.iframe.n
浏览 99提问于2019-09-03得票数 0
回答已采纳
1回答
我正在尝试嵌入一个vue应用程序在一个网站，这已经是一个Vue应用程序的toplevel div。主要网站是动态网站(CMS)。在toplevel上有一个div (vueApp)，它被转换为vue应用程序。
现在，我还有一个嵌套的vue应用程序，它使用自己的javascript (并且正在托管)。这个嵌套的应用程序完全在主vue应用程序的html中(参见下面的结构)
现在我有两个问题：
The嵌套应用程序在主vueApp挂载后无法工作。这些事件似乎断断续续。因此，它看起来很好，但点击没有处理。Vue抱怨vueApp div.中的脚本标记。
<html>
<body>
浏览 6提问于2022-06-14得票数 1
1回答
我的路线有问题。我有一个简单的点击处理程序推到路由器。
methods: {
page(path) {
this.$router.push(path);
}
}
这将显示正确的内容，但是URL 简要地返回到正确的，然后返回到前面的URL。我只是新出现的，因为当我单击'back‘浏览器按钮时，URL是正确的。
我打开控制台，决定测试路由器。
$vm0.$router.push('/my-path');
它不仅显示了正确的内容，而且URL也是正确的。
我现在很困惑如何进一步调试这个问题，所以如果有人有任何想法，请告诉我。
router.js
impo
浏览 4提问于2020-02-19得票数 2
回答已采纳
1回答
我是vue.js新手，我想在组件中使用框架制作一个简单的表单，这需要这个jQuery片段才能工作：
$(document).ready(function() {
M.updateTextFields();
});
构成部分是：
<template>
<div>
<div class="row">
<div class="input-field col s6">
<input value="" id="first_
浏览 0提问于2018-09-05得票数 1
vue js的新特性..我有一个vue应用程序，当点击表格数据时，它将显示抽屉使用蚂蚁设计抽屉。它是工作时，抽屉代码和是在一个文件。但我需要将它分开。我已经导入了新文件，添加了抽屉代码，但抽屉不工作，点击数据。如何同步两个vue文件？
我试过:visible.sync，但我不知道这个东西是怎么工作的。是否有任何我可以参考的参考资料或任何关于.sync的文档
浏览 17提问于2019-11-26得票数 0
2回答
我在Vue.js中有一个简单的文本字段：
new Vue({
el: '#app',
data: {
value: 'Test'
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model="value" ref="input&
浏览 4提问于2019-02-15得票数 2
回答已采纳
2回答
我使用vue.js并在表中创建一个表，我有一个输入字段为quantity，所以当我键入第一个单词时，它是在控制台上打印empty。
如果我键入3，则显示为空，如果键入44，则打印4，我正在使用v-on:keypress捕获事件，我不知道这里有什么问题
var app = new Vue({
el: "#app",
data: {
invoice_products: [{
product_no: '',
product_name: '',
product_price: '',
浏览 3提问于2019-12-05得票数 2
回答已采纳
我正在使用Select作为Vue组件，并将其定义为模板。我正在定义组件、数据和支持。
var MyComponent = Vue.component('my-component',{
template: "<select v-on:change=\"onAppSelected\" \n"+
"v-model:value=\"appId\"> \n"+
"<option v-for=\"appChoice in appChoices\"
浏览 0提问于2018-12-27得票数 0
回答已采纳
目前，我的Vue路由器正在为我的路由器使用哈希模式，我正在寻找一种在生成到另一个组件的链接时传递参数的方法。到目前为止，我想出了这个：
在我的标记中，这就是当前的样子：
<b-button variant="primary" class="rounded-0" :href="'/article/' + article.id" >View post</b-button>
我将文章id传递到链接中，以便当用户单击按钮时，它将指向一个组件，在该组件中，带有相应id的文章与其内容一起可见。
设置路由时会出现问题，下
浏览 3提问于2022-08-08得票数 0
回答已采纳
这个vue.js代码执行什么：
beforeCreate
已创建
已挂载
但不是：
beforeUpdate
已更新
已激活
var vm = new Vue({
el: '#app',
data: function() {
return {
message: 'This is a test.'
}
},
methods: {
changeText: function() {
this.message = 'changed';
浏览 2提问于2017-08-31得票数 3
Chrome和Firefox在打开“选项”菜单的同时，在select元素上单击“事件”，但Safari在“选项”菜单关闭之前不会触发事件。我需要点击事件立即启动点击，任何解决办法？
我在Safari 9和10上进行了测试。
<div id="app">
<select @click="runTest($event)" v-model="selectedValue">
<option value>select to check your browser</option>
浏览 3提问于2018-05-28得票数 4
回答已采纳
2回答
我有一个使用Vue CLI 3创建的项目，其中包括Vue的PWA插件。我想显示一个横幅，提示用户点击应用程序中的“刷新”链接，如'Approach #3‘部分所描述的。
但是在我的Vue.js应用程序中，由于服务工作者代码是在main.js中执行的，而且我的snackbar横幅是内置到我的App.vue组件中的，所以我不知道如何在调用了服务工作者updated()事件之后触发main.js方法。
main.js (适用部分)
import Vue from 'vue';
import App from './App';
import './reg
浏览 2提问于2018-12-08得票数 5
回答已采纳
为什么单击按钮时不会触发Vue.js @input事件？ 当我直接改变输入的值时(点击count元素并输入新的值)，alert方法被触发。 new Vue({
el: "#app",
data: {
count: 0
},
methods: {
add: function() {
this.count += 1;
},
alert: function() {
alert('Count has been changed!');
}
}
}) <script src=&
浏览 59提问于2019-05-03得票数 0
我正在构建我的第一个Vue.js项目，我希望通过左右键盘箭头键在页面(prev页面/下一页)之间导航。
我创建了 (并将我的代码附加在我的请求的底部)来演示我所面临的问题。当使用v-on:click时，我创建的警报方法工作得非常好。我尝试过使用v-on:keyup、v-on:keydown和v-on:keypress，但这两个选项都没有触发警报以指示arrowkey功能是否正常工作。
我发现这个详细描述了一个类似的问题，其中一条注释描述了我从v1.0.0开始使用的方法是一个可行的解决方案。我已经检查了当前版本的Vue的，似乎我做的一切都是正确的。
我很可能错过了一些关键的东西，但是经过大量的实
浏览 1提问于2018-10-25得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
