Câu hỏi:

Làm cách nào để gọi nhiều hàm trong một @click? (hay còn gọi là v-on:click)?

Tôi đã thử

• Chia các hàm bằng dấu chấm phẩy : <div @click="fn1('foo');fn2('bar')"> </div>;

• Sử dụng một số @click: <div @click="fn1('foo')" @click="fn2('bar')"> </div>;

nhưng làm thế nào để làm điều đó cho đúng?

Tái bút : Chắc chắn tôi luôn làm được

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

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

Nhưng đôi khi điều này không tốt đẹp.

Trên Vue 2.3 trở lên, bạn có thể làm điều này:

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

Trước hết, bạn có thể sử dụng ký hiệu ngắn @clickthay vì v-on:clickcho các mục đích dễ đọc.

Thứ hai, bạn có thể sử dụng trình xử lý sự kiện nhấp chuột gọi các hàm / phương thức khác như @Tushar đã đề cập trong nhận xét của anh ấy ở trên, vì vậy bạn kết thúc với một cái gì đó như sau:

<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>

Nếu bạn muốn thứ gì đó dễ đọc hơn một chút, bạn có thể thử cách này:

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

Đối với tôi, giải pháp này có vẻ giống Vue hơn, hy vọng bạn sẽ thích

để thêm một hàm bất thường để làm điều đó có thể là một giải pháp thay thế:

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

Tách thành từng miếng.

Nội tuyến:

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

HOẶC: Thông qua một hàm tổng hợp:

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

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

Cách đơn giản này để thực hiện v-on: click = "firstFunction (); secondFunction ();"

Điều này phù hợp với tôi khi bạn cần mở một hộp thoại khác bằng cách nhấp vào nút bên trong hộp thoại và cũng đóng hộp thoại này. Chuyển các giá trị dưới dạng tham số với dấu phân cách bằng dấu phẩy.

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

trong Vue 2.5.1 cho các nút hoạt động

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

Việc Vuexử lý sự kiện chỉ cho phép các cuộc gọi hàm đơn lẻ. Nếu bạn cần thực hiện nhiều cái, bạn có thể thực hiện một trình bao gồm cả hai:

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

BIÊN TẬP

Một tùy chọn khác là chỉnh sửa trình xử lý đầu tiên để có lệnh gọi lại và chuyển trình xử lý thứ hai vào.

<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()

Tôi muốn nói thêm rằng bạn cũng có thể sử dụng điều này để gọi nhiều phát hoặc nhiều phương thức hoặc cả hai cùng nhau bằng cách tách với; dấu chấm phẩy

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

Tuy nhiên, bạn có thể làm điều gì đó như sau:

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

có, bằng cách sử dụng sự kiện html onclick gốc.