প্রশ্ন:
একটি একক ক্লিকে একাধিক ফাংশন কীভাবে কল করবেন? (ওরফে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);
}
তবে কখনও কখনও এটি সুন্দর হয় না।
v-on:click="[click1($event), click2($event)]"। আমি এটি নীচে উত্তর দিয়েছি :)
উত্তর:
ভ্যু ২.৩ এবং এর উপরে আপনি এটি করতে পারেন:
<div v-on:click="firstFunction(); secondFunction();"></div>
// or
<div @click="firstFunction(); secondFunction();"></div>
event
v-on:click="firstFunction; secondFunction;"কাজ করবে না
$event
<div @click="firstFunction($event); secondFunction($event);এট ভয়েল :)
প্রথম সব আপনি সংক্ষিপ্ত স্বরলিপি ব্যবহার করতে পারেন @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>
আপনি যদি কিছুটা বেশি পঠনযোগ্য কিছু চান তবে আপনি এটি চেষ্টা করতে পারেন:
<button @click="[click1($event), click2($event)]">
Multiple
</button>
আমার কাছে, এই সমাধানটি ভু-যেমন আশা আপনি উপভোগ করেছেন তা অনুভব করে
e.stopPropagate()উপর click1($event)যাতে click2(event)পরিচালনা করা অভ্যস্ত?
click1($event)এবং click2($event)একই ইভেন্টের জন্য 2 টি আলাদা কার্য নয় 2 টি আলাদা ইভেন্ট। e.stopPropagate()জন্য কিছুই করবেন না click2()। আশা করি তা উপলব্ধি করে :)
click2($event)ট্রিগার থেকে থামার কোনও উপায় নেই ?
একটি অনামুক্ত ফাংশন যুক্ত করতে এটি বিকল্প হতে পারে:
<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div>
$eventকোনও একটি আরগ হিসাবে প্রয়োজন হয় তবে আপনাকে এটির ভিতরে এটি ব্যবহার করতে আপনার নতুন ফাংশনটির প্যারামিটার হিসাবে পাস করতে হবে। যেমন ($event) => {func1($event); func2('x');}
<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-btn absolute fab small slot="activator" top right color="primary" @click="(addTime = true),(ticketExpenseList = false)"><v-icon>add</v-icon></v-btn>
বোতাম কাজের জন্য ভ্যু 2.5.1 এ
<button @click="firstFunction(); secondFunction();">Ok</button>
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);
}
এইচটিএমএল:
<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()