Vue में @click के साथ कई फ़ंक्शन कैसे कॉल करें?

Question

सवाल:

एकल @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);
}

लेकिन कभी-कभी यह अच्छा नहीं होता है।

Comments

सिंगल क्लिक हैंडलर बनाएं और उस कॉल में दो कार्य करें।

— तुषार

हां, मैं यह कर सकता हूं, लेकिन थोड़ा बदसूरत हूं।

— सर्गेई पैनफिलोव

ऐसा करने के लिए एक विसंगतिपूर्ण फ़ंक्शन जोड़ें: <div v-on: click = "return function () {fn1 ('foo'); fn2 ('bar');} ()"> </ div>

— वोल्फगैंग

@Wolfgang इसे उत्तर के रूप में जोड़ें (यह अंतिम वैकल्पिक समाधान है)।

— सेर्गेई पैन्फिलोव

यहाँ मेरी राय में कुछ अधिक पठनीय है, आप यह कर सकते हैं v-on:click="[click1($event), click2($event)]":। मैंने इसका उत्तर नीचे दिया :)

— शैलेन नादू

Answer 1

Vue 2.3 और उसके बाद आप यह कर सकते हैं:

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

Comments

ठंडा। मुझे लगता है कि यह 2.3 के लिए नया होना चाहिए? मेरे लिए 2.2.6 पर काम नहीं करता है। यदि ऐसा है तो अपग्रेड करने का अच्छा कारण।

— रोक्को २४'१

यह कोशिश की, और सादे जवाब के साथ चला गया क्योंकि मैं समझ नहीं पा रहा था कि कैसे गुजरना eventहै

— पिरजान

यह ध्यान रखना दिलचस्प है कि फ़ंक्शन नाम में कोष्ठक को काम करना आवश्यक है। v-on:click="firstFunction; secondFunction;"काम नहीं करेगा

— आंद्रे रवाज़ी

@Pirijan यह करने के लिए बाध्य है$event

— माइकल Mrozek

@Pirijan <div @click="firstFunction($event); secondFunction($event);Et voilà :)

— rdhainaut

Answer 2

सबसे पहले आप पठनीय उद्देश्यों @clickके v-on:clickलिए लघु संकेतन का उपयोग कर सकते हैं ।

दूसरा आप एक क्लिक ईवेंट हैंडलर का उपयोग कर सकते हैं जो अन्य कार्यों / विधियों को कॉल करता है जैसे @ तुषार ने अपनी टिप्पणी में ऊपर उल्लेख किया है, इसलिए आप कुछ इस तरह से समाप्त करते हैं:

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

Answer 3

यदि आप कुछ अधिक पढ़ना चाहते हैं, तो आप यह कोशिश कर सकते हैं:

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

मेरे लिए, यह समाधान अधिक Vue जैसी आशा करता है कि आप आनंद लेते हैं

Comments

यह सबसे मुहावरेदार समाधान की तरह लगता है। क्या कोई कमियां हैं?

— किर्रा

@ किरा नोप, न कि मैंने पाया है जब से मैंने उस वाक्य रचना का पता लगाया है। अगर मैं किसी चीज में भाग

— लेता

यदि आप ऐसा करना चाहते हैं e.stopPropagate(), click1($event)तो click2(event)अभ्यस्त को कैसे संभाला जाए?

— जूलियो मोटोल

@JulioMotol click1($event)और click2($event)एक ही घटना के लिए सिर्फ 2 अलग-अलग फ़ंक्शन हैं 2 अलग-अलग इवेंट नहीं। e.stopPropagate()के लिए कुछ भी नहीं करेंगे click2()। आशा है कि समझ में आता है :)

— Shailen Naidoo

तो click2($event)ट्रिगर करने से रोकने का कोई तरीका नहीं है ?

— जूलियो मोटोल

Answer 4

एक वैकल्पिक फ़ंक्शन जोड़ने के लिए जो एक विकल्प हो सकता है:

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

Comments

एक ES6 विकल्प: @click = "() => {function1 (पैरामीटर्स); फंक्शन 2 (पैरामीटर्स);}"

— AdamJB

महत्वपूर्ण नोट: यदि आपके एक नेस्टेड फ़ंक्शन $eventको एक arg के रूप में जरूरत है , तो आपको इसे अपने नए फ़ंक्शन के पैरामीटर के रूप में इसके अंदर उपयोग करने की आवश्यकता होगी। उदाहरण के लिए। ($event) => {func1($event); func2('x');}

— zcoop98

Answer 5

टुकड़ों में अलग।

पंक्ति में:

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

या: एक समग्र समारोह के माध्यम से:

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

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

Answer 6

वी-ऑन करने का यह सरल तरीका: क्लिक करें = "फ़र्स्टफ़ंक्शन (); दूसरा फ़ंक्शन ();"

Comments

मेरा मानना ​​है कि यह कंपाइलर को तोड़ देगा और रेंडर नहीं करेगा। बस कोशिश की - तोड़ दिया।

— क्रिस जॉनसन

मैं नीचे देख सकता हूं कि यह कुछ के लिए काम करता है, लेकिन मेरे लिए 2.6.6 में टूट जाता है।

— क्रिस जॉनसन

Answer 7

यह मेरे लिए काम करता है जब आपको एक डायलॉग बॉक्स के अंदर एक बटन पर क्लिक करके दूसरे डायलॉग बॉक्स को खोलने की जरूरत होती है और इसे भी बंद कर दें। मानों को एक अल्पविराम विभाजक के रूप में मानें।

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

Answer 8

बटन कार्यों के लिए Vue 2.5.1 में

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

Answer 9

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);
}

Answer 10

एचटीएमएल:

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

जे एस:

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

Answer 11

मैं जोड़ूंगा, कि आप इसका उपयोग कई उत्सर्जन या विधियों या दोनों को एक साथ अलग करने के लिए कर सकते हैं; सेमीकोलन

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

Answer 12

हालाँकि, आप कुछ ऐसा कर सकते हैं:

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

हाँ, देशी onclick HTML घटना का उपयोग करके।