Отправка выбранного имени кнопки через Vue / Axios

Question

У меня есть кнопка в файле, которая выглядит следующим образом

ОБНОВЛЕНО

<div v-for="button in buttons"
    :key="button.value"
    class="gc gc-one-third gc-whole-to2">
    <button @click.stop.prevent="onClick(button)">{{ button.from }} <br /> {{ button.to }}</button>
</div>

Как протолкнуть часть КНОПКИ ТЕКСТ нажатой кнопки (всего их 3) через форму, используя Axios и Vue, так как там написано, что я не могу использовать v-модель.

ОБНОВЛЕНО

const app = new Vue({
    el: '#app',
    data() {
        return {
            step: 1,
            counter: 0,
            buttons: [{
                value: 1,
                from: '£3,000',
                to: 'TO £5,000'
            }, {
                value: 2,
                from: '£5,000',
                to: 'TO £10,000'
            }, {
                value: 3,
                from: 'OVER',
                to: '£10,0000'
            }],
            debt: {
                name: null,
                email: null,
                tel: null
            }
        }
    },
    methods: {
        prev() {
            this.step--;
        },
        next() {
            this.step++;
        },
        onClick(button) {
            this.counter = button.value;
        },
        submit() {
            axios.post('post.php', {
                'name': this.debt.name,
                'email': this.debt.email,
                'tel': this.debt.tel,
            }).then(response => {
                console.log('success', response.data.message)
            }).catch(error => {
                console.log(error.response)
            });
        }
    }
});

Любая помощь будет высоко ценится.

Спасибо, Джейк.

Answer 1

Если вам нужно значение 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)
        });
    }

Если вам нужен заголовок кнопки

<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

Если у вас есть форма с 10 кнопками и вы хотите опубликовать заголовок кнопки, которая была нажата с помощью 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>