As it currently is, the form is getting submitted to the same URL when you click the Submit button. This is not Vue magic—this is just default <form> behavior, especially since we didn't specify an action attribute on the tag.
In most real-world scenarios, you'll want to perform a couple of operations before submitting a form. The most common would be validating some inputs, or perhaps even overriding the default submit behavior with an asynchronous call using a library such as Axios.Â
First, we need to make sure that, when the user clicks the Submit button, we prevent the form from going out on its own. We also want to bind a new method to it being clicked.
Let's bind to the form's submit event first. Remember that we want to add the .prevent modifier to the event so that, when the form is submitted, the...