[Vuejs]-Sending Selected button name through Vue / Axios

by

0👍

If you need the value of the counter

    submit() {
        axios.post('post.php', {
            'name': this.debt.name,
            'email': this.debt.email,
            counter: this.counter
        }).then(response => {
            console.log('success', response.data.message)
        }).catch(error => {
            console.log(error.response)
        });
    }

If you need the caption of the button

<button ref="myBtn" @click.stop.prevent="counter = 1">VALUE</button>

    submit() {
        axios.post('post.php', {
            'name': this.debt.name,
            'email': this.debt.email,
             value: this.$refs.myBtn.innerHTML
        }).then(response => {
            console.log('success', response.data.message)
        }).catch(error => {
            console.log(error.response)
        });
    }

UPDATE

If you have a form with 10 buttons and want to post the caption of the button which was clicked with AXIOS:

<form>
  <div>
    some text <button type="button" @click="submit">VALUE</button>
  </div>
  <div>
    some other text <button type="button" @click="submit">OTHER VALUE</button>
  </div>
  <div>
    something else <button type="button" @click="submit">EVEN OTHER</button>
  </div>
</form>


<script>
submit(event) {
    axios.post('post.php', {
        'name': this.debt.name,
        'email': this.debt.email,
         value: event.target ? event.target.innerHTML : ""
    }).then(response => {
        console.log('success', response.data.message)
    }).catch(error => {
        console.log(error.response)
    });
}
</script>

Leave a comment