I have a button within a file that looks like the below
UPDATED
<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>
How do I push the BUTTON TEXT part of the clicked button (There are 3 in total) through the form using Axios and Vue as it says that I cannot use v-model.
UPDATED
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)
});
}
}
});
Any help would be much appreciated.
Thanks, Jake.
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)
});
}
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>