Как вызвать несколько функций с помощью v-on: нажмите
Как вызвать несколько функций в одном v-on событие? Нет разницы: щелчок, фокус или что-то еще?
Что-то вроде:
<div v-on:click="fn1('foo');fn2('bar')"> </div>
Или, может быть:
<div v-on:click="fn1('foo')"
v-on:click="fn2('bar')"> </div>
Как это сделать правильно?
ОБНОВЛЕНИЕ: Да, конечно, я всегда могу сделать
<div v-on:click="fn3('foo', 'bar')"> </div>
function fn3 (args) {
fn1(args);
fn2(args);
}
Но это действительно ужасно.
20 ответов
Прежде всего вы можете использовать краткую запись @click вместо v-on:click для удобства чтения.
Во-вторых, вы можете использовать обработчик события 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>
Я на Vue 2.3, и я могу сделать это:
<div v-on:click="firstFunction(); secondFunction();"></div>
Если вы хотите что-то более читаемое, вы можете попробовать следующее:
<button @click="[click1($event), click2($event)]">
Multiple
</button>
Для меня это решение больше похоже на Vue, надеюсь, вам понравится
обновлено декабрь 2021 г.
вам нужно отделить запятой, как это:
<button @click="open(), onConnect()">Connect Wallet</button>
Чтобы добавить аномимную функцию, это может быть альтернативой:
<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div>
Разделить на кусочки.
В соответствии:
<div @click="f1() + f2()"></div>
ИЛИ: через составную функцию:
<div @click="f3()"></div>
<script>
var app = new Vue({
// ...
methods: {
f3: function() { f1() + f2(); }
f1: function() {},
f2: function() {}
}
})
</script>
Я просто хочу добавить сюда один небольшой недостающий бит, которого мне не хватало во всех приведенных выше ответах; то есть вам действительно нужно вызвать метод, а не просто передать его имя как вызываемое, когда вы хотите добавить несколько обработчиков кликов.
Это может стать сюрпризом, поскольку 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>
Это простой способ сделать v-on:click="firstFunction(); secondFunction();"
Это работает для мужчин, когда вам нужно открыть другое диалоговое окно, нажав кнопку рядом с полем диалога, а также закрыть это окно. Передать значения как параметр с разделителем запятыми.
<v-btn absolute fab small slot="activator" top right color="primary" @click="(addTime = true),(ticketExpenseList = false)"><v-icon>add</v-icon></v-btn>
На основе ES6 с анонимными функциями:
<button @click="() => { function1(); function2(); }"></button>
В Vue 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);
}
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()
Просто сделайте так, как показано ниже:
с :
<div @click="function1($event, param1); function2($event,param1);"></div>без
$event:<div @click="function1(param1); function2(param1);"></div>
Вы можете сделать это как
<button v-on:click="Function1(); Function2();"></button>
ИЛИ
<button @click="Function1(); Function2();"></button>
Вы можете написать javascript как обычную многострочную строку:
@click="(event) => {
console.log(event);
console.log("Second log");
}"
Я бы добавил, что вы также можете использовать это для вызова нескольких излучений или методов или обоих вместе, разделив их с помощью; точка с запятой
@click="method1(); $emit('emit1'); $emit('emit2');"
Я также искал это решение и использовал разные методы, и я нашел этот лучший для меня. Только что поделился с вами ***Вы можете использовать литералы шаблонов для использования нескольких функций в одном событии в vuejs
<div @click="`${firstFunction() ${secondFunction() ${thirdFucntion()}`"></div>
Примечание: я использую vue3.
Однако вы можете сделать что-то вроде этого:
<div onclick="return function()
{console.log('yaay, another onclick event!')}()"
@click="defaultFunction"></div>
да, с помощью нативного html-события onclick.