뷰: @click으로 다중 기능을 호출하려면 어떻게 해야 합니까?

뷰: @click으로 다중 기능을 호출하려면 어떻게 해야 합니까?

여러 기능을 단일에 호출하려면 어떻게 해야 합니까?@click? (일명)v-on:click)?

지금까지 노력했습니다.

• 세미콜론을 사용하여 함수 분할:<div @click="fn1('foo');fn2('bar')"> </div>;

• 여러개 사용하기@click:<div @click="fn1('foo')" @click="fn2('bar')"> </div>;

이를 해결하기 위해 핸들러를 만들 수 있습니다.

<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)와 같은 희망으로 느껴집니다.

2021년 12월 업데이트됨

다음과 같은 쉼표로 구분해야 합니다.

<button @click="open(), onConnect()">Connect Wallet</button>

이를 위해 익명 함수를 추가하는 것이 대안이 될 수 있습니다.

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

조각조각 나눕니다.

인라인:

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

OR: 복합 기능을 통해:

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

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

v-on을 수행하는 간단한 방법: 클릭="first Function(); second Function();"

대화 상자 안에 있는 단추를 클릭하여 다른 대화 상자를 열고 이 대화 상자를 닫아야 할 때 사용할 수 있습니다.쉼표 구분 기호를 사용하여 값을 매개 변수로 전달합니다.

<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가 전화를 연결하는 것을 허용하기 때문에 놀랄 수 있습니다.click조련사

효과가 있습니다.

<div><button @click="foo(); bar();">Button1</button></div>
<div><button @click="foo">Button2</button></div>

그렇지 않습니다.

<div><button @click="foo; bar;">Button3</button></div>

JsFiddle 예제

그Vue이벤트 처리는 단일 함수 호출만 허용합니다.여러 개를 수행해야 하는 경우 다음을 모두 포함하는 래퍼를 수행할 수 있습니다.

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

익명 기능을 갖춘 ES6 기준:

<button @click="() => { function1(); function2(); }"></button>

다음을 사용할 수 있습니다.

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

아래와 같이 하면 됩니다.

• 와 함께$event:

  <div @click="function1($event, param1); function2($event,param1);"></div>
  

• 없이.$event:

  <div @click="function1(param1); function2(param1);"></div>
  

이 방법을 사용하여 여러 방출 또는 메서드를 호출하거나; 세미콜론으로 구분하여 둘 다 호출할 수도 있습니다.

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

이렇게 하면 됩니다.

<button v-on:click="Function1(); Function2();"></button>

오어

<button @click="Function1(); Function2();"></button>

저도 이 솔루션을 살펴보고 여러 가지 방법을 사용했는데 이 방법이 저에게 가장 적합하다는 것을 알았습니다.방금 공유했습니다 ***템플릿 리터럴을 사용하여 vuejs에서 하나의 이벤트에서 여러 기능을 사용할 수 있습니다.

<div @click="`${firstFunction() ${secondFunction() ${thirdFucntion()}`"></div>

참고: vue3을 사용하고 있습니다.

javascript를 일반 다중 행으로 작성할 수 있습니다.

@click="(event) => {
          console.log(event);
          console.log("Second log");
        }"

그러나 당신은 다음과 같은 것을 할 수 있습니다.

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

예, native on click html 이벤트를 사용합니다.

언급URL : https://stackoverflow.com/questions/38744932/vue-how-do-i-call-multiple-functions-with-click