问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue如何触发某个元素的单击事件?

头像
程诺一生
    3249
    <a class="link">1111</a>
<a class="link">2222</a>
<a class="link">333</a>

<button>点击我触发a的单击事件</button>

    在jquery中单击某个按钮后可以直接用$('a').trigger("click");
    来触发a元素的单击事件

    那么在vue中该如何实现?

    javascript
    阅读 93.1k
    10 个回答
    得票最新
    头像
    hunaisong
      86711119
      ✓ 已被采纳

      想通过点击<a>标签来触发事件么？这个问题我曾经遇到过，其实是vue中把a标签的点击原生事件貌似禁用掉了。但是我们可以如下这么写，来触发这个点击事件。

      <a class="link" @click.native="test">1111</a>
<a class="link" @click.native="test">2222</a>
<a class="link" @click.native="test">333</a>

<button @test='shout'>点击我触发a的单击事件</button>

  <script type="text/javascript">
    var vm = new Vue({
      el:"#app",
      methods: {
        test: function () {
          console.log(1);
          this.$emit('test');//把a标签的点击事件分发
        },
        shout:function () {
          console.log('我触发了它');
        }
      }
    })
  </script>

      YOU WILL NOT MISS IT~~

      头像
      lavyun
        1.1k3919

        和操作dom一样。

        <button @click="handleBtnClick">点击按钮</button>
<p @click="handleTextClick" id="text">文字</p>
        methods:  {
    handleBtnClick: function(){
        document.getElementById("text").click();
    },
    handleTextClick: function(){
        alert("hello");
    }
}
        头像
        zWìng
          2.4k1315

          如果你是想不通过点击来触发事件的话..
          直接调用该方法就可以.

          头像
          songzeng
            4012

            第一步给元素添加 ref， 第二步触发点击事件 this.$refs.refName.$el.click();

            头像
            默默
              27124

              我是这么写的。
              html代码：

              <label>
     <Button style="position: absolute;" @click="up_click">选择文件 </Button>
     <input type="file" ref="file_up" name="file" id="up_file" style="width:160px;margin-left: 14px;outline: none;" @change="up_change($event)">
</label>

              vue.js代码：

              // 文件上传按钮
up_click:function() {
            vm.$refs['file_up'].click();
        },
        // 文件上传
        up_change: function (event) {
            vm.data.reason_file = event.target.files[0]
            // console.log(vm.data);
        }
              头像
              子陌
                1
                新手上路，请多包涵

                应该是v-on:click="函数名"

                头像
                月凉心凉
                  703
                  绑定的事件有两种：
1、绑定事件处理器
2、绑定内联方法调用
<input type="button" name="btnGetNumber" value="增加[绑定事件处理器]" v-on:click="getNumber">
<input type="button" name="btnGetNumber" value="增加[内联方法调用]" v-on:click="getNumber()">

                  <script>

                  var app = new Vue({         
  el: '#app',               
  data: {                   
    number: 1
  },
  methods: {
    // 事件响应方法的逻辑代码
    getNumber: function (e) {
      this.number += 1;   // 不管是内联方法调用，还是绑定事件处理器两种方式执行事件响应方法的时候 this都是指向 app
    }
  }
});

                  </script>

                  传送门vue学习指南

                  头像
                  microzz
                    33416

                    v-on绑定事件，如果是点击事件就v-on:click="某个方法事件"

                    <a v-on:click="fun" class="btn">1111</a>

                    如果需要传参就:

                    <a v-on:click="fun(arg1,arg2)" class="btn">1111</a>

                    也可以简写为@click="某个事件方法"

                    <a @click="fun" class="btn">1111</a>

                    在Vue构造器里面就要写相应的methods

                    methods: {
  fun(arg1, arg2) {},
  fun2() {}
}
                    头像
                    wanghao
                      2
                      新手上路，请多包涵

                      我来回答一波吧，，，因为没复习，，导致知识点结合不紧密。。。
                      原生的中。。我们的写法是这样的

                      `<!DOCTYPE html>
                      <html>
                      <head>

                      <meta charset="utf-8">
<title>王蒿大爷</title>
<script>
    function myFunction(){
        document.getElementById("demo").innerHTML="Hello World";
    }
    window.onload=function(){
        console.log("事件触发函数");
        console.log(document.getElementById("bb").
        getAttribute("onclick"));
        //  五秒后触发某个事件
        setTimeout(function(){
            window.eval(document.getElementById("bb").
            getAttribute("onclick"))
        },5000);
    }
</script>
</head>
    <body>
    <p>单击按钮触发函数。</p>
    <button onclick="myFunction()" id="bb">点我</button>
    <p id="demo"></p>
    </body>
</html>

                      `

                      这是原生的，，然后如果是VUE的话，你想触发他的点击事件的话，，我也不知道，，我现在思路有点混乱，，，如果你说的是触发将来某个元素的点击事件的话，，我想到的是定时器来做这个东西。。。检测元素是否存在，，然后emit("click") 我不知道这个思路可不可行。。。等一下应该会去尝试

                      头像
                      menke
                        1
                        新手上路，请多包涵

                        楼主我懂你的意思,现在我找了半天(真的算半天,一个下午都在找)都没有找到框架对这个功能的支持,比如jquery想要触发一个节点的事件只需要调用指定的事件函数不传参即可触发,传参即可绑定事件,这样就可以实现比如单击按钮添加数据以后会自动聚焦到输入框继续添加的功能,暂时我只找到了使用自定义指令的方法来对节点执行操作,但是自定义指令没有办法只监听自己绑定的属性,还需要判断是否是自己的属性发生了改变没有才能执行操作,还是有点不方便,可以说vue对这方面的支持很不好.

                        撰写回答
                        你尚未登录，登录后可以
                        • 和开发者交流问题的细节
                        • 关注并接收问题和回答的更新提醒
                        • 参与内容的编辑和改进，让解决方法与时俱进
                        推荐问题
                        宣传栏