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>

vue.js jquery

阅读 4.3k

4 个回答

papersnake

✓ 已被采纳

用不到 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...

帕奇式

92441019

发布于
2017-08-23

用vue的方法不行？

<div id="app">
   <ul>
     <li><button ref="article1" type="button" class="article-list" data-articleId="1" @click="handleDelete()">删除</button></li>
     <li><button ref="article2" type="button" class="article-list" data-articleId="2" @click="handleDelete()">删除</button></li>
   </ul>
</div>
    
<script>
    var Main = {
        methods: {
            handleDelete() {
                console.log(this.$refs.article1.dataset['data-articleId']);
                //output: 1
            }
        }
    };
    var demo = Vue.extend(Main);
    new demo().$mount('#app');
</script>

nicezhu

83621739

发布于
2017-08-23

在组件渲染完成时，也就是

  var Main = {
        methods: {
            handleDelete() {
                //怎么用jquery获取当前点击button元素的data-articleId属性
                  $(document).on('click','#app button',function(){
                     console.log($(this).data('articleId'))
                  })
            }
        }，
        mounted(){
          this.handleDelete();
        }
    };