Pytanie:
Jak wywołać wiele funkcji jednym kliknięciem @click? (aka v-on:click
)?
próbowałem
Podział funkcji średnikiem:
<div @click="fn1('foo');fn2('bar')"> </div>
;Użyj kilka
@click
:<div @click="fn1('foo')" @click="fn2('bar')"> </div>
;
ale jak to zrobić poprawnie?
PS : Na pewno zawsze mogę
<div v-on:click="fn3('foo', 'bar')"> </div>
function fn3 (args) {
fn1(args);
fn2(args);
}
Ale czasami to nie jest miłe.
javascript
vue.js
Siergiej Panfiłow
źródło
źródło
v-on:click="[click1($event), click2($event)]"
. Odpowiedziałem poniżej :)Odpowiedzi:
W Vue 2.3 i nowszych możesz to zrobić:
<div v-on:click="firstFunction(); secondFunction();"></div> // or <div @click="firstFunction(); secondFunction();"></div>
źródło
event
przezv-on:click="firstFunction; secondFunction;"
nie zadziała$event
<div @click="firstFunction($event); secondFunction($event);
Et voilà :)Przede wszystkim możesz użyć krótkiej notacji
@click
zamiastv-on:click
dla czytelności.Po drugie, możesz użyć modułu obsługi zdarzenia kliknięcia, który wywołuje inne funkcje / metody, jak @Tushar wspomniany w jego komentarzu powyżej, więc otrzymasz coś takiego:
<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>
źródło
Jeśli chcesz czegoś bardziej czytelnego, możesz spróbować tego:
<button @click="[click1($event), click2($event)]"> Multiple </button>
Wydaje mi się, że to rozwiązanie bardziej przypomina nadzieję Vue, którą lubisz
źródło
e.stopPropagate()
naclick1($event)
tak, żeclick2(event)
przyzwyczajenie obchodzić?click1($event)
iclick2($event)
to tylko 2 różne funkcje dla tego samego wydarzenia, a nie 2 różne wydarzenia.e.stopPropagate()
nic nie zrobi dlaclick2()
. Mam nadzieję, że to ma sens :)click2($event)
wyzwalanie?aby dodać anomymalną funkcję, która może być alternatywą:
<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div>
źródło
$event
jako argumentu, musisz przekazać ją jako parametr do swojej nowej funkcji, aby była używana wewnątrz niej. Na przykład.($event) => {func1($event); func2('x');}
Podzielić na kawałki.
W treści:
<div @click="f1() + f2()"></div>
LUB: Poprzez funkcję złożoną:
<div @click="f3()"></div> <script> var app = new Vue({ // ... methods: { f3: function() { f1() + f2(); } f1: function() {}, f2: function() {} } }) </script>
źródło
Ten prosty sposób na v-on: click = "firstFunction (); secondFunction ();"
źródło
Działa to w przypadku mnie, gdy musisz otworzyć inne okno dialogowe, klikając przycisk w oknie dialogowym, a także zamknąć to. Przekaż wartości jako parametry z separatorem przecinkiem.
<v-btn absolute fab small slot="activator" top right color="primary" @click="(addTime = true),(ticketExpenseList = false)"><v-icon>add</v-icon></v-btn>
źródło
w Vue 2.5.1 dla przycisku działa
<button @click="firstFunction(); secondFunction();">Ok</button>
źródło
Obsługa
Vue
zdarzeń dopuszcza tylko pojedyncze wywołania funkcji. Jeśli chcesz zrobić wiele z nich, możesz zrobić opakowanie, które zawiera oba:<div @click="handler"></div> //////////////////////////// handler: function() { //Syntax assuming its in the 'methods' option of Vue instance fn1('foo'); fn2('bar'); }
EDYTOWAĆ
Inną opcją jest edytowanie pierwszego modułu obsługi tak, aby miał wywołanie zwrotne i przekazanie drugiego.
<div @click="fn1('foo', fn2)"></div> //////////////////////////////////// fn1: function(value, callback) { console.log(value); callback('bar'); }, fn2: function(value) { console.log(value); }
źródło
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()
źródło
Dodałbym, że możesz również użyć tego do wywołania wielu emisji lub metod lub obu razem, oddzielając za pomocą; średnik
@click="method1(); $emit('emit1'); $emit('emit2');"
źródło
możesz jednak zrobić coś takiego:
<div onclick="return function() {console.log('yaay, another onclick event!')}()" @click="defaultFunction"></div>
tak, używając natywnego zdarzenia html onclick.
źródło