如何使用 vue.js 在 @click 事件上添加两种方法？答案

【问题标题】：How to add two methods on a @click event using vue.js?如何使用 vue.js 在 @click 事件上添加两种方法？
【发布时间】：2018-08-18 23:22:41
【问题描述】：

这是我的代码，我基本上想将 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 以及处理程序，但它不起作用。希望你知道！

【问题讨论】：

标签： function methods vue.js onclick

【解决方案1】：

您可以使用;（或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>

【讨论】：

【解决方案2】：

最简单的方法是：

<button v-on:click="method1(); method2();">Continue</button>

【讨论】：

【解决方案3】：

你不能简单地调用函数内部的方法吗？

【讨论】：