Vue.js Form Input Binding trim Modifier

Vue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance.  We can create Single Page Applications as well as Full Stack applications.

Input Binding is used to sync and maintain the state of form input elements with the corresponding state in javascript. So Vue.js provides a v-model directive which makes the task of maintaining the state of the forms easier by the simple implementation.

Input Binding trim modifier automatically removes the whitespace from the user input. It trims the text content by removing the whitespace before the text and after the end of the text. It works with any input element.

Syntax: Add the .trim modifier at the end of the v-model to the element of your choice as follows:

<input type="text" placeholder="Write here!" v-model.trim="message" />

Example: In the following example, we have the input element with the trim modifier.

Step 1: Create a new Vue.js project using the npm node.js package manager.

npm init vue@latest

Enter the project name and preset the project as follows:

Project Structure: After successful installation, the following project structure will be formed.

Project Structure

Step 2: Inside the App.vue file, add the data member message which will be used for the v-model in the data section of the script file. The v-model uses a data member to bind the data and it is very simple to implement.

App.vue:

Javascript

<script>
export default {
  data() {
    return {
      message: '',
    }
  },
}
</script>

Step 3: Now, in the template section, add the input element with a paragraph element to display the message that is being written. Inside the input element, mention the v-model where we will specify the data member we defined earlier.

App.vue:

Javascript

<template>
  <center>
    <h1 style="text-align: center;
        color: green">
        GeeksforGeeks
   </h1>
    <strong>
        Vue.js Form Input Value Binding trim modifier
    </strong>
    <br />
  </center>
  <center>
    <p>Content with trim modifier</p>
        {{ message }}
    <br />
    <input type="text"
           placeholder="Write here!"
           v-model.trim="message" />
  </center>
</template>

Step 4: Run the project using the following command and see the output.

npm run dev

Output: It will run the project on http://localhost:3000/ and the result will be as follows:

Reference: https://vuejs.org/guide/essentials/forms.html#trim