这是我的代码,我基本上想将 CHANGEBUTTONS 添加到看起来像 @click 的点击事件。
<button @click="enviarform2" value="Delete from favorites" style="font-weight: 700;color:#428bca;margin-left:30px;height:30px;border-radius:4px" name="delete" v-else>Delete from favorites</button>
<script>
new Vue({
el:'#app',
data:{
show: true,
paletteid : <?=$palette_id;?>,
action: "add",
action2: "delete",
number: ""
},
methods: {
enviarform: function() {
axios.post('/validarfavorite.php', {
paletteid: this.paletteid,
action: this.action
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
this.number = "Yours plus ";
},
enviarform2: function() {
axios.post('/validarfavorite.php', {
paletteid: this.paletteid,
action2: this.action2
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
this.number = "Minus yours plus ";
},
changebuttons: function() {
this.show = !this.show;
}
}
});
</script>
我已经尝试过方法 1 和方法 2 以及处理程序,但都没有用。希望你知道!
最佳答案
您可以使用 ;
(或 comma operator )分隔调用:
<button @click="@click="m1(); m2()">my button</button>
<button @click="@click="m1(), m2()">my button</button>
但是,如果您的代码在多个地方使用,那么最佳实践(“最干净的方法”)是创建第三种方法并改为使用它:
<button @click="mOneAndTwo">my button</button>
演示:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
m1: function() { this.message += "m1"; },
m2: function() { this.message += "m2"; },
mOneAndTwo: function() {
/* call two methods. */
this.m1();
this.m2();
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<button @click="m1(); m2()">call two methods using ;</button><br>
<button @click="m1(), m2()">call two methods using ,</button><br>
<button @click="mOneAndTwo">call two methods using a third method</button><br>
</div>
关于function - 如何使用 vue.js 在 @click 事件上添加两个方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49209834/