如何通过自定义指令修改v-model属性值？自定义指令改值无效问题

问题1：如何通过自定义指令修改v-model属性的值？ #

其实v-model本质是value属性绑定 + input事件监听的语法糖，要让自定义指令修改v-model绑定的数据，不能只改DOM元素的value，还得手动触发input事件——这是关键，只有这样Vue的响应式系统才能感知到变化，同步更新对应的数据。

举个直观的实现例子：

Vue.directive('modify-model', {
  inserted(el, binding, vnode) {
    // 把DOM值改成指令传入的新内容
    const newValue = binding.value;
    el.value = newValue;
    // 触发input事件，通知Vue更新v-model绑定的数据
    el.dispatchEvent(new Event('input'));
  }
});

在模板里这样用：

<input v-model="myData" v-modify-model="newTargetValue">

如果是自定义组件的v-model，要注意组件model选项定义的prop和事件，这时候可能需要触发组件对应的自定义事件（比如change，具体看组件的配置）来同步数据。

问题2：自定义指令修改组件值无效果的问题分析与修复 #

看你提供的代码，问题核心是只修改了DOM元素的value，但没有触发input事件，导致Vue的响应式数据content没收到更新通知，所以看起来修改无效。

修复后的完整代码： #

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);
        // 新增：触发input事件，让v-model同步更新data里的content
        e.target.dispatchEvent(new Event('input'));
      }
    }
    el.addEventListener('input', handler);
  }
});

let app = new Vue({
  el: '#app',
  data() {
    return {
      content: '',
      totalCount: 140
    }
  }
});

为什么这样改就生效了？ #

v-model是靠监听input事件来同步data数据的，你之前只改了DOM的value，但没告诉Vue“数据变了”，所以content还是原来的值。加上dispatchEvent(new Event('input'))后，Vue会捕获到这个事件，自动把DOM的最新值同步到content里，效果就正常了。

你用的是Vue 2.5，这个方案完全适配，不用担心版本问题。

内容的提问来源于stack exchange，提问作者mail G