如何通过自定义指令修改v-model属性的值？ [英] How to modify the value of v-model property via custom directive?

问题描述

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

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

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 指令来更改值是可以的！

when I use v-bind:input directive to change value is ok!

推荐答案

首先：

• 您正在使用 v模型，即 textarea 将是 v模型变量中的任何内容（在这种情况下，变量内容）。这意味着将忽略DOM的初始值。


• 为处理此问题，我将字符串从DOM声明中移至了<$（见下文） data（）中的c $ c> content 。

• 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().

第二个：

• Vue不直接响应 .value 中的更改。 v模型实际上监视DOM元素中的 input ✱事件。
  
  
  
  
  • ^{_{✱实际上取决于元素的类型而有所不同，有时是更改事件或其他}}
  
  
  • 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}}

    更改 .value ，触发 input 事件。 Vue将接起该事件并从中更新 v-model 变量当前 .value ，然后将其覆盖。

    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.

    演示：

    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>

    这篇关于如何通过自定义指令修改v-model属性的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！