How to get string length in Vue JS?

In this post i will explain with you how to get string length in Vue js. You can simply get string length in Vue.js. We can get string length using “.length” attribute.

This can be implemented directly within the template or in the component’s method or computed properties.

You can use see below full example.

1. Get string length in Vue JS using computed property
Example
<template>
 <div>
    <input v-model="myData" placeholder="Type something here..." />
    <p>Length: {{ dataLength }}</p>
 </div>
</template>

<script>
export default {
    data() {
        return {
            myData:  ""
        };
    },
    computed: {
        dataLength() {
            return this.myData.length;
        }
    }
};
</script>
2. Direct get string length
Example
<template>
  <div>
    <p> {{ myMessage}} </p>
    <p> {{ myMessage.length}} </p>
  </div>
</template>

<script>
export default {
  data() {
      return {
          myMessage: "Hello, user";
      };
  }  
};
</script>

I hope this tutorial help you.

Leave a Reply

Your email address will not be published. Required fields are marked *