vueJS点击事件不起作用
Posted
技术标签:
【中文标题】vueJS点击事件不起作用【英文标题】：vueJS click event not working 【发布时间】：2018-06-15 11:36:27 【问题描述】：我正在尝试在静态 html 文件中的 Vue 中创建一个单击事件作为测试，但它没有按预期工作。请参阅下面的完整代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--[if IE]><![endif]-->
<!--Empty IE conditional comment to improve site performance-->
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<script type="text/babel">
var titleFilter = new Vue(
el: '#filter',
methods:
clickEvent: function()
console.log('Vue is working.');
);
</script>
<a id="filter" v-on:click="clickEvent" href="#">CLICK ME</a>
</body>
</html>
所以作为一个清单：
-
我在方法对象中有我的函数
函数名称正确
我包括图书馆
在我的脚本标签中，我将 babel 指定为类型
它不工作，怎么了？
【问题讨论】：
好吧，一，您创建 Vue 的脚本在#filter 存在之前执行。
@Bert 按照脚本标签的顺序？我将脚本标签移动到锚点下方，结果相同。控制台不记录。
将 A 包裹在 ID 为 filter 的 div 中，然后从锚标签中删除过滤器 ID
【参考方案1】：
这行得通
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<a id="filter" v-on:click="clickEvent" href="#">CLICK ME</a>
<script type="text/javascript">
var titleFilter = new Vue(
el: '#filter',
methods:
clickEvent: function()
console.log('Vue is working.');
);
</script>
</body>
</html>
将 text/babel 更改为 text/javascript 并将你的 JS 代码移到下面
【讨论】：
vue 技术上不是 babel 吗？这就是这让我相信vue-loader.vuejs.org/en/features/es2015.html 那么为什么使用 text/babel 会破坏它呢？ babel 是一个转译器以上是关于vueJS点击事件不起作用的主要内容，如果未能解决你的问题，请参考以下文章