I developed a Vue application for a dynamic form with two buttons, and I need to indicate which button was clicked in the request. To achieve this, I update the value of a hidden input field and then submit the form using jQuery. However, when I click on the button that should set the hidden input to true for the first time, it sends false initially instead. Subsequent clicks work as expected.
Here is a brief excerpt of what I'm doing, excluding the actual jQuery request. The value seems to update correctly, so I'm unsure if it's a race condition or if I'm overlooking something obvious.
<form id="myVueForm">
<input type="hidden" name="submitEdit" :value="submitEdit">
<button type="button" @click="submitEdit = true">Submit Edit</button>
<button type="button" @click="submitEdit = false">Submit without Edit</button>
</form>
var myApp = new Vue({
el: '#myVueForm',
data: function() {
return {
submitEdit: false
}
},
watch: {
'submitEdit': function(value) {
console.log(this.submitEdit, "submitEdit value");
console.log('Submitting form!');
}
}
})