events - 如何通过自定义指令修改 v-model 属性的值？

Question

当我使用自定义指令更改组件的值时，没有效果:

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)
      }
    }
    el.addEventListener('input', handler);
  }
});
let app = new Vue({
  el: '#app',
  data() {
    return {
      content: '',
      totalCount: 140
    }
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id='app'>
  <div>
    <div class='content'>
      <textarea v-model='content' v-maxchars='140'>tell me something</textarea>
    </div>
  </div>
</div>

当我使用 v-bind:input 指令更改值时没问题!

Answer 1

首先:

• 您正在使用 v-model，textarea 的值将是 v-model 的变量(在在本例中，变量 content)。这意味着 DOM 的初始值被忽略。
• 为了处理这个问题，我将字符串从 DOM 声明移动(见下文)到 data() 中的 content。

第二个:

• Vue 不直接响应 .value 的变化。 v-model 实际上会监视来自 DOM 元素的 input* 事件。
  • ^{_{✱ 它实际上取决于元素的类型，有时是 change 事件，或其他}}
• 如果您只设置值，Vue 会在下次发生更新时简单地将其重写回(content 中的任何内容)。

解决方案:

更改.value后，触发input事件。Vue会选择事件并更新v-model 来自当前 .value 的变量 在覆盖它之前。

演示:

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
    }
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id='app'>
  <div>
    <div class='content'>
      <textarea v-model='content' v-maxchars='18'></textarea>
    </div>
    <pre>
    content: {{ content }}
    Max chars is 18, current is {{ content.length }}.
    </pre>
  </div>
</div>