คำถาม:

จะเรียกใช้หลายฟังก์ชันใน @click เดียวได้อย่างไร? (aka v-on:click)?

ฉันเหนื่อย

• แบ่งฟังก์ชันด้วยเครื่องหมายอัฒภาค: <div @click="fn1('foo');fn2('bar')"> </div>;

• ใช้หลายตัว@click: <div @click="fn1('foo')" @click="fn2('bar')"> </div>;

แต่จะทำอย่างไรให้ถูกต้อง?

PS : แน่นอนว่าฉันทำได้เสมอ

<div v-on:click="fn3('foo', 'bar')"> </div>

function fn3 (args) { 
  fn1(args);
  fn2(args);
}

แต่บางครั้งมันก็ไม่ดี

ใน Vue 2.3 ขึ้นไปคุณสามารถทำได้:

<div v-on:click="firstFunction(); secondFunction();"></div>
// or
<div @click="firstFunction(); secondFunction();"></div>

ก่อนอื่นคุณสามารถใช้สัญกรณ์สั้น ๆ@clickแทนv-on:clickเพื่อจุดประสงค์ในการอ่านได้

ประการที่สองคุณสามารถใช้ตัวจัดการเหตุการณ์การคลิกที่เรียกใช้ฟังก์ชัน / วิธีการอื่น ๆ ตามที่ @Tushar กล่าวไว้ในความคิดเห็นของเขาด้านบนดังนั้นคุณจะได้สิ่งต่อไปนี้:

<div id="app">
   <div @click="handler('foo','bar')">
       Hi, click me!
   </div>
</div>

<!-- link to vue.js !--> 
<script src="vue.js"></script>

<script>
   (function(){
        var vm = new Vue({
            el:'#app',
            methods:{
                method1:function(arg){
                    console.log('method1: ',arg);
                },
                method2:function(arg){
                    console.log('method2: ',arg);
                },
                handler:function(arg1,arg2){
                    this.method1(arg1);
                    this.method2(arg2);
                }
            }
        })
    }()); 
</script>

หากคุณต้องการบางสิ่งที่อ่านง่ายขึ้นคุณสามารถลองสิ่งนี้:

<button @click="[click1($event), click2($event)]">
  Multiple
</button>

สำหรับฉันการแก้ปัญหานี้ให้ความรู้สึกเหมือน Vue เหมือนหวังว่าคุณจะชอบ

หากต้องการเพิ่มฟังก์ชันที่ผิดปกติให้ทำซึ่งอาจเป็นทางเลือก:

<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div> 

แยกเป็นชิ้น ๆ .

อินไลน์:

<div @click="f1() + f2()"></div> 

หรือ: ผ่านฟังก์ชันคอมโพสิต:

<div @click="f3()"></div> 

<script>
var app = new Vue({
  // ...
  methods: {
    f3: function() { f1() + f2(); }
    f1: function() {},
    f2: function() {}
  }
})
</script>

วิธีง่ายๆในการทำ v-on: click = "firstFunction (); secondFunction ();"

สิ่งนี้ใช้ได้ผลสำหรับฉันเมื่อคุณต้องการเปิดกล่องโต้ตอบอื่นโดยคลิกปุ่มในกล่องโต้ตอบและปิดกล่องนี้ด้วย ส่งผ่านค่าเป็นพารามิเตอร์ด้วยตัวคั่นด้วยเครื่องหมายจุลภาค

<v-btn absolute fab small slot="activator" top right color="primary" @click="(addTime = true),(ticketExpenseList = false)"><v-icon>add</v-icon></v-btn>

ใน Vue 2.5.1 สำหรับปุ่มทำงาน

 <button @click="firstFunction(); secondFunction();">Ok</button>

การVueจัดการเหตุการณ์อนุญาตให้เรียกใช้ฟังก์ชันเดียวเท่านั้น หากคุณต้องการทำหลายรายการคุณสามารถทำ Wrapper ที่มีทั้ง:

<div @click="handler"></div>
////////////////////////////
handler: function() { //Syntax assuming its in the 'methods' option of Vue instance
    fn1('foo');
    fn2('bar');
}

แก้ไข

อีกทางเลือกหนึ่งคือแก้ไขตัวจัดการแรกให้มีการโทรกลับและส่งผ่านตัวที่สองใน

<div @click="fn1('foo', fn2)"></div>
////////////////////////////////////
fn1: function(value, callback) {
    console.log(value);
    callback('bar');
},
fn2: function(value) {
    console.log(value);
}

Html:

<div id="example">
  <button v-on:click="multiple">Multiple</button>
</div>

JS:

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    multiple: function (event) {
      this.first()
      this.second()
    }
    first:  function (event) {
      //yourstuff
    }
    second: function (event) {
      //yourstuff
    }
  }
})

vm.multiple()

ฉันจะเพิ่มว่าคุณยังสามารถใช้สิ่งนี้เพื่อเรียกการเปล่งเสียงหรือวิธีการหลายรายการหรือทั้งสองอย่างร่วมกันโดยแยกด้วย; อัฒภาค

  @click="method1(); $emit('emit1'); $emit('emit2');"

คุณสามารถใช้สิ่งนี้:

<div @click="f1(), f2()"></div> 

อย่างไรก็ตามคุณสามารถทำสิ่งนี้ได้:

<div onclick="return function()
              {console.log('yaay, another onclick event!')}()" 
              @click="defaultFunction"></div>

ใช่โดยใช้เหตุการณ์ html onclick ดั้งเดิม