사용자 지정 지시문을 통해 v-model 속성 값을 수정하는 방법은 무엇입니까?

사용자 지정 지시문을 통해 v-model 속성 값을 수정하는 방법은 무엇입니까?

커스텀 디렉티브를 사용하여 컴포넌트 값을 변경해도 효과가 없습니다.

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값 변경 지시어는 OK!

첫 번째:

• 사용하고 있습니다.v-model, 의 값textarea무엇이든지 될 것이다v-model의 변수(이 경우 변수)content이것은, DOM 의 초기치가 무시되는 것을 의미합니다.
• 이 처리를 위해 문자열을 DOM 선언에서content에data().

두 번째:

• Vue가 변경에 응답하지 않음.value직접적으로. v-model실제로 기다리다inputDOM 요소로부터의 이벤트.
  • ^{_{§ 실제로 요소의 종류에 따라 다르며, 경우에 따라서는change이벤트 또는 기타}}
• 설정만 하면valueVue는 단순히 덮어쓰기(에 있는 모든 것으로)를 되돌립니다.content)을 클릭합니다.

솔루션:

변경 후 이벤트를 트리거합니다.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>

이벤트 기능을 사용하여 입력 이벤트를 생성하기만 하면 됩니다.

var event = new Event("input", {blubles: true});

그런 다음 값을 수정한 다음 이벤트를 디스패치하면 v-model 값이 업데이트됩니다.

el.dispatchEvent(이벤트);

Vue.directive('maxchars', {
  update(el, binding, vnode) {
    var event = new Event("input", { bubbles: true });
    let maxChars = binding.value;
      if (el.value.length > maxChars) {
        el.value = e.value.substr(0, maxChars);
        el.dispatchEvent(event);
      }
  }
});

도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/49598541/how-to-modify-the-value-of-v-model-property-via-custom-directive