9.7.4 Forms

HTML forms are key in user interfaces. There are 2 sides to the forms: the user interface side and a handling side that translates them into requests. In the previous section we saw how Vue sends the requests. In this section, we will give some insights on the user interface building and on Cross-Site Request Forgery and Method Spoofing.

Building HTML forms with Vue

Creating the Form

Vue has an extensive documentation and very exhaustive resources that we will not try to replicate in this documentation but rather point you to the most important concepts that are needed for form building.

If you are a starter in Vue, you need to know that Vue builds on top of HTML and through javascript, it extends the capabilities of HTML by providing nimble ways of creating reusable components and templates. However, given that it is built on top of the HTML markup, if you are more comfortable creating forms in the HTML you know then you could very much continue to do so.

In this documentation, we would like you to pay careful attention to the following concepts:

• Interpolations and Directives
• Form Bindings
• Conditional Renderings
• Loops - aka List Rendering

Handling the form

In order for your HTML forms to call methods from your Vue scripts, you need to pay careful attention to the event handling:

• Event Handling

Since Vue is responsible for handling the requests, you need a way to stop the browser from reacting to submissions. Why? because submissions command the browser to send a request directly to the server but you don't want that with Vue. With Vue, you need to make sure that requests are prepared and sent from the Vue script.

In order to achieve that, you need to halt the default browser events and prevent them. Vue has a neat way that helps you do that in the form definition:

   <!--
    @submit is a short for on-submit
    @submit.prevent blocks the default browser behavior. It is equivalent to e.preventDefault() in plain javascript
   -->
   <form id="<form id>" method="POST" enctype="multipart/form-data" @submit.prevent="<name of method in vue script">
      //... 
   </form>

Cross-Site Reference Forgery and Method Spoofing

Caligrafy has a nimble way of including csrf and of spoofing a 'POST' to turn it into a 'PUT' or a 'DELETE'. When you are not using Vue, you can use the provided Caligrafy PHP methods to do that.

Learn more about CSRF and Method Spoofing

However when using Vue, the desire is to limit as much as possible the use of PHP language in a markup. Luckily, Caligrafy provides you with an easy way to do that.

CSRF

Caligrafy provides you with a set of global variables that you can use directly in your Vue app. These variables have been loaded using the initialization steps that we covered earlier in the documentation.

To avoid CSRF, you need to append the session token to the form data that is sent in the request:

   formData.append("_token", this.env.token); // the token is provided in the env global variable

Method Spoofing

HTML forms, as we mentioned earlier, do not support 'PUT' and 'DELETE' requests. Caligrafy provides a way upon handling the request to change it from a 'POST' to a 'PUT' or a 'DELETE'. In order for that to happen, the form needs to provide a way to tell the server whether it wants to do the switch.

Similarly to the CSRF, you will need to append a _method input to your form data and Caligrafy knows how to handle the rest:

   // To switch to a PUT
   formData.append("_method", 'PUT');

   // To switch to a DELETE
   formData.append("_method", 'DELETE');

Next Section: Validations