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

查看：28
本文介绍了如何通过自定义指令修改 v-model 属性的值?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Vue.directive('maxchars', {绑定(el，绑定，vnode){让 maxChars = binding.value;让处理程序 = 函数(e){如果(e.target.value.length > maxChars){e.target.value = e.target.value.substr(0, maxChars)}}el.addEventListener('input', handler);}});让应用程序 = 新 Vue({el: '#app',数据() {返回 {内容: ''，总数:140}}})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"><;/脚本><div id='应用程序'><div><div class='content'><textarea v-model='content' v-maxchars='140'>告诉我一些事情</textarea>

当我使用 v-bind:input 指令改变值时是可以的！

解决方案

第一:

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

第二:

  • Vue 不直接响应 .value 中的更改.v-model 实际上监视来自 DOM 元素的 input✱ 事件.
    • ✱ 实际上是根据元素的类型而变化的，有时是change事件，或者其他
  • 如果您只是设置了 value，Vue 将在下次更新时简单地将其覆盖(覆盖content 中的任何内容).

解决方案:

更改.value后，触发input事件. Vue 将拾取该事件并更新v-model 变量从当前 .value 覆盖它之前.

演示:

Vue.directive('maxchars', {绑定(el，绑定，vnode){让 maxChars = binding.value;让处理程序 = 函数(e){如果(e.target.value.length > maxChars){e.target.value = e.target.value.substr(0, maxChars);vnode.elm.dispatchEvent(new CustomEvent('input'));//添加了这个}}el.addEventListener('input', handler);}});让应用程序 = 新 Vue({el: '#app',数据() {返回 {内容:告诉我一些事情"，总数:140}}})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"><;/脚本><div id='应用程序'><div><div class='content'><textarea v-model='content' v-maxchars='18'></textarea>

<预>内容:{{内容}}最大字符数为 18，当前为 {{ content.length }}.

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>

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

解决方案

First:

Second:

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

<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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆