Vuejs: Character Counter Vuejs: Character Counter vue.js vue.js

Vuejs: Character Counter


In general, with most modern front-end frameworks (Angular, React, Vue, etc) you want to avoid manipulating and inspecting the DOM manually. The recommended approach is to make everything data-driven (aka: use the model) and let the framework update the DOM when needed - this is a key concept behind the whole "reactivity system"

But here are a few recommendations to fix your issue:

Do not call your limit() method on DOM events. Instead... look at the eligibility.address.details attribute which is are binding to the inputs v-model.

You can create a computed property that calculates the remaining characters based on that attribute.

computed: {    charactersLeft() {        var char = this.eligibility.address.details.length,            limit = 140;        return (limit - char) + " / " + limit + "characters remaining";      }}

Then in your markup, you would use the computed property like a regular data property:

<span class="limiter">{{charactersLeft}}</span>