I am trying to create a form with multiple buttons that will change the action and target properties when a specific button is clicked.
Below is my code snippet:
<div id="root">
<form :action="form.action" ref="form" :target="form.target">
<button >Submit to /test</button>
<button id="new" @click.prevent="submit">Submit to /new</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#root',
data: {
form: {
action: '/test',
target: '_blank'
}
},
methods: {
submit: function() {
this.form = {
action: '/new',
target: '_self'
};
console.log(this.$refs.form);
this.$refs.form.submit();
}
}
})
</script>
After testing, I noticed that the form always submits to /test, even after clicking on the #new button.
Additionally, the console.log(this.$refs.form); statement returns
<form action="/new" target="_self">
This brings up the question of why the form is not being submitted to /new as intended. Any ideas?