通过 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>

如何使用 Axios 和 Vue 通过表单推送单击按钮的 BUTTON TEXT 部分（总共 3 个），因为它说我不能使用 v-model。

更新

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)
        });
    }

更新

如果您有一个包含 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>