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 mapped to Vue component instance using v-model directive.

Vue provides two-way binding using v-model directive which passes data from form input control to/from 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 script Declared message property which configured in 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 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 character and pending character count
• v-model holds data property message for two way binding
• isError is a boolean flag to check count is less than -1 and displays error color red
• characterCount has a logic of checking character count entered in the text area

Here is an complete code:

Output: