Как вызвать несколько функций с помощью @click in vue?
Вопрос:
Как вызвать несколько функций в одном клике? (он же v-on:click
)?
Я пытался
но как это сделать правильно?
П.С.: Конечно, я всегда могу сделать
<div v-on:click="fn3('foo', 'bar')"> </div>
function fn3 (args) {
fn1(args);
fn2(args);
}
Но иногда это нехорошо.
Ответы
Ответ 1
Прежде всего, вы можете использовать короткую запись @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>
Ответ 2
Я на Vue 2.3, и я могу это сделать:
<div v-on:click="firstFunction(); secondFunction();"></div>
Ответ 3
чтобы добавить анономическую функцию, которая может быть альтернативой:
<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div>
Ответ 4
Разделить на куски.
Инлайн:
<div @click="f1() + f2()"></div>
ИЛИ: через составную функцию:
<div @click="f3()"></div>
<script>
var app = new Vue({
// ...
methods: {
f3: function() { f1() + f2(); }
f1: function() {},
f2: function() {}
}
})
</script>
Ответ 5
Это простой способ сделать v-on: click = "firstFunction(); secondFunction();"
Ответ 6
Это работает для меня, когда вам нужно открыть другое диалоговое окно, нажав кнопку внутри диалогового окна, а также закрыть это. Передайте значения в виде параметров с разделителем запятых.
<v-btn absolute fab small slot="activator" top right color="primary" @click="(addTime = true),(ticketExpenseList = false)"><v-icon>add</v-icon></v-btn>
Ответ 7
в Vue 2.5.1 для кнопки работает
<button @click="firstFunction(); secondFunction();">Ok</button>
Ответ 8
Обработка событий 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);
}
Ответ 9
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()
Ответ 10
вы можете, однако, сделать что-то вроде этого:
<div onclick="return function()
{console.log('yaay, another onclick event!')}()"
@click="defaultFunction"></div>
да, используя собственное событие onclick html.