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>