vuejs input Textarea binding with examples

vuejs input Textarea binding with examples

textarea is an input multi-line component in HTML. It is used to input forms in web applications to take input from a user.

This can be created in HTML as follows

<textarea placeholder="Please enter comments"></textarea>

In this article, How to implement textarea two input binding with v-model and input binding, and text area example usage.

Simple TextArea example vuejs

Like any input form control, Textarea values are mapped to the Vue component instance using the v-model directive.

Vue provides two-way binding using the v-model directive which passes data from form input control to/from the controller.

In the below Vue component

Declared Textarea in a template of the Vue component Added v-model to have a two-way binding from template to/from a script Declared message property which configured in the v-model attribute in the data function

<template>
  <div class="hello">
    <textarea v-model="message" placeholder="Please add"></textarea>
  </div>
  <span>Comments:</span>
  <p style="white-space: pre-line">{{ message }}</p>
  <br />
</template>

<script>
export default {
  name: "textarea",
  props: {
    message: String,
  },
  data: function () {
    return {
      message: "",
    };
  },
};
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

v-model provides two-way data binding, The same can be achieved with :value and @input ie.Textarea input binding :value provides read the value from input ie one-way binding @input allows setting value to an input text area.

This way we can achieve two-way binding without v-model

<template>
  <div class="hello">
    <textarea
      :value="message"
      @input="message = $event.target.value"
      rows="10"
      cols="50"
    ></textarea>
  </div>
</template>

<script>
export default {
  name: "textarea",
};
</script>

character count with textarea component in vuejs

This is an example of limiting Textarea’s character count to 100, giving an error message if the count reaches more than 100. In this example,

-keyup event added with event handler function - characterCount, which is bound using v-on or : syntax

  • defined initial values of a text area properties as well as character and pending character count
  • v-model holds data property message for two-way binding
  • isError is a boolean flag to check the count is less than -1 and displays the error color red
  • characterCount has a logic of checking the character count entered in the text area

Here is a complete code:

<template>
  <div class="hello">
    <textarea
      :keyup="characterCount"
      v-model="message"
      placeholder=""
    ></textarea>
  </div>
  <span></span>
  <p v-bind:class="{ error: isError }">
    Remaining Character Count :{{ pendingCount }}
  </p>
  <br />
</template>

<script>
export default {
  name: "textarea",

  data: function () {
    return {
      totalCount: 100,
      pendingCount: 100,
      message: "",
      isError: false,
    };
  },
  methods: {
    characterCount: function () {
      this.pendingCount = this.totalCount - this.message.length;
      this.isError = this.pendingCount < 0;
    },
  },
};
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
textarea {
  height: 150px;
  margin-bottom: 5px;
}
.error {
  color: red;
}
</style>

Output:

vue textarea example two way binding