Вопрос:
Как вызвать несколько функций за один @click? (он же 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);
}
Но иногда это неприятно.
javascript
vue.js
Сергей Панфилов
источник
источник
v-on:click="[click1($event), click2($event)]"
. Я ответила на него ниже :)Ответы:
В Vue 2.3 и выше вы можете сделать это:
<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);
Et voilà :)Прежде всего, вы можете использовать короткие обозначения,
@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, надеюсь, вам понравится
источник
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-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>
источник
в 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()
источник
Я бы добавил, что вы также можете использовать это для вызова нескольких излучений или методов или обоих вместе, разделив их с помощью; точка с запятой
@click="method1(); $emit('emit1'); $emit('emit2');"
источник
однако вы можете сделать что-то вроде этого:
<div onclick="return function() {console.log('yaay, another onclick event!')}()" @click="defaultFunction"></div>
да, используя собственное событие onclick html.
источник