vue.js - vue和jquery混写问题
本文介绍了vue.js - vue和jquery混写问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
demo如下，我想在handleDelete()方法中用jquery获取当前点击button元素的data-articleId属性，不知怎么写，请各位大佬帮示意一下：
demo.html
<div id="app">
<ul>
<li><button type="button" class="article-list" data-articleId="1" @click="handleDelete()">删除</button></li>
<li><button type="button" class="article-list" data-articleId="2" @click="handleDelete()">删除</button></li>
</ul>
</div>
<script>
var Main = {
methods: {
handleDelete() {
//怎么用jquery获取当前点击button元素的data-articleId属性
}
}
};
var demo = Vue.extend(Main);
new demo().$mount('#app');
</script> 解决方案
用不到 jquery
加个$event 参数就好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li><button type="button" class="article-list" data-articleId="1" @click="handleDelete($event)">删除</button></li>
<li><button type="button" class="article-list" data-articleId="2" @click="handleDelete($event)">删除</button></li>
</ul>
</div>
<script>
var Main = {
methods: {
handleDelete(e) {
console.log(e.target.dataset.articleid)
}
}
};
var demo = Vue.extend(Main);
new demo().$mount('#app');
</script>
</body>
</html>http://jsbin.com/dufiyocewe/e...
这篇关于vue.js - vue和jquery混写问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
