How to modify the value of v-model property via custom directive?

Question

When I use custom directive to change component\'s value, there is not effect:

Answer 1

First:

• You are using v-model, the value of the textarea will be whatever is in the v-model's variable (in this case, the variable content). This means that the initial value of the DOM is ignored.
• To handle this, I moved (see below) the string from the DOM declaration to the content in data().

Second:

• Vue does not respond to changes in .value directly. v-model actually watches for input✱ events from the DOM element.
  • ^{_{✱ it actually varies depending on the type of element, sometimes it is the change event, or other}}
• If you just set the value, Vue will simple override it back (to whatever is in content) next time an update happens.

Solution:

After changing the .value, trigger input event. Vue will pick the event up and update the v-model variable from the current .value before it overrides it.

Demo:

Vue.directive('maxchars', {
  bind(el, binding, vnode) {
    let maxChars = binding.value;
    let handler = function(e) {
      if (e.target.value.length > maxChars) {
        e.target.value = e.target.value.substr(0, maxChars);
        vnode.elm.dispatchEvent(new CustomEvent('input')); // added this
      }
    }
    el.addEventListener('input', handler);
  }
});
let app = new Vue({
  el: '#app',
  data() {
    return {
      content: 'tell me something',
      totalCount: 140
    }
  }
})

  

    

      
    
    
    content: {{ content }}
    Max chars is 18, current is {{ content.length }}.