如何使用vue.js在@click事件中添加两个函数？ [英] How to add two functions on a @click event using vue.js?

问题描述

这是我的代码，我基本上想要将CHANGEBUTTONS添加到类似于@click的点击事件中。

This is my code and i basically want to add CHANGEBUTTONS to the on click event that looks like @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以及处理程序，但它没有奏效。希望你知道！

I have tried with method 1 and method 2 and handler but it didnt work. Hope you know!

推荐答案

以最简单的形式，您可以拥有模板：

In it's simplest form, you can, having the template:

<button @click="handleButtonClick">my button</button>

在您的JavaScript代码中执行操作：

Do, in your JavaScript Code:

new Vue({
    el:'#app',  
    data:{   
       show: true,
       //    ... 
    },
    methods: {
       m1: function() {   /* ... */ },
       m2: function() { /* ... */ },
       handleButtonClick: function() {
         /* call two methods. */
         this.m1();
         this.m2();
       }
    }
})

您也可以使用 JavaScript的逗号操作符：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <button @click="m1(), m2()">two methods</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    m1() { this.message += "m1"; },
    m2() { this.message += "m2"; }
  }
})

Demo JSFiddle here 。

这篇关于如何使用vue.js在@click事件中添加两个函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！