jquery로 업데이트할 경우 Vuejs 바인딩이 작동하지 않음

jquery로 업데이트할 경우 Vuejs 바인딩이 작동하지 않음

지스피들

HTML:

<div id="testVue">

<input id="test" v-model="testModel"/>

<button @click="clickMe()">Click me</button>

<button @click="showValue()">Show value</button>

</div>

자바스크립트

var testVue = new Vue({
  el: '#testVue',

  data: {
    testModel: 'Hello Vue!'
  },

  methods: {

    clickMe: function() {
        $("#test").val("testing");
        console.log(this.testModel);
    },

    showValue: function() {
        console.log(this.testModel);
    }
  }
});

부에즈에서 이러면 안 되는 거 다 이해해$("#test").val("testing");, 나는 이렇게 했어야 했다.this.testModel="testing";

하지만 나는 왜 이 기본적인 구속력이 부에즈에서 작동하지 않는지 이해할 수 없어?나는 입력란을 jquery로 업데이트하는 HTML 구성 요소가 꽤 많은데, 예를 들어 Calendar, Autocomomplete, Select2와 같이 모두 non-vuejs 방식으로 입력 상자를 업데이트한다.

이 일을 처리할 쉬운 방법은?

대답하기에는 너무 늦었지만, 미래에 이 문제에 대해 어정쩡한 사람은 나와 함께 일하기 위해 나의 제안을 이용할 수 있다.

나는 어디선가 그것을 읽은 적이 있었다.This is a jQuery problem, trigger/val() doesn't dispatch native events in some cases.그래서 우리는 값 변경 후 네이티브 JS Event를 발송할 것이다.jQuery val()

$("#test").val("testing")[0].dispatchEvent(new Event('input'))

유의할 점:-

• 부에에서,text그리고textarea원소 사용하다input이벤트 및checkboxes,radio그리고select사용하다change이벤트로이에 따라 이벤트 발송;
• ID 선택기를 사용하면$("#test")당신은 이것을 단일 돔 요소에 적용하고 있다. 그래서 내가 선택한 것이다.[0] th원소의만약 당신이 그것을 여러 요소들로 의도한다면, 당신은 루프를 사용해서 al에 이벤트를 보낼 수 있다.

참조 :- Github의 Vue 문제

가장 좋은 방법은 모든 것이 동기화되도록 jQuery가 입력 val 대신 데이터를 변경하도록 하는 것이다.

다음과 같은 경우:

let mainState = { inputVal: 'testing' };

let app = new Vue({
  el: '#app',
  data: mainState,
  methods: {
    vueThing() {
      this.inputVal = 'Vue value';
    }
  }
}); 

$('#jqThing').on('click', function() {
  mainState.inputVal = 'jQuery Value';
});

https://jsfiddle.net/6evc921f/

또는 vue 구성 요소에서 jQuery 요소 생성자를 포장한 후 Vue 고급 페이지에서 사용하십시오.

@change 이벤트만 사용하십시오.

<input @change="$emit('update:testModel', $event.target.value)" id="test" v-model="testModel"/>

다음과 같은 수식어를 사용할 수도 있다.

<input id="test" v-model.lazy="testModel"/>

문서에 언급된 바와 같이:By default, v-model syncs the input with the data after each input event (with the exception of IME composition as stated above). You can add the lazy modifier to instead sync after change events.

때문에 효과가 없다.v-model를 사용하다input기본적으로 실행되지 않는 이벤트:

$("#test").val("testing");

그렇기 때문에 특별한 이유가 없는 한 DOM에 어떤 것도 직접 주입해서는 안 된다.

해당 상자에 입력하고 다음을 클릭하십시오.showValue입력 이벤트가 발생했기 때문에 올바르게 업데이트되었음을 알게 될 것이다.

만약 당신이 정말로 이 길을 가고 싶다면(그리고 나는 당신이 하지 않을 것을 추천한다) 그러면 당신은 단지 다음과 같은 당신만의 맞춤법 지침을 쓸 수 있을 것이다.

Vue.directive('model-inject', {
    bind: function(el, binding, vnode) {
        el.value = vnode.context[binding.expression];

        // Create inject event and add it to Vue instance (available by this.injectEvent)
        vnode.context.injectEvent = new CustomEvent("inject");
        // Attach custom event to el
        el.addEventListener('inject', function() {
            vnode.context[binding.expression] = el.value;
        });

        // Also bind input
        el.addEventListener('input', function() {
            vnode.context[binding.expression] = el.value;
        });
    },
    update: function(el, binding, vnode) {
        el.value = vnode.context[binding.expression];
    }
});

라는 사용자 지정 이벤트를 바인딩하는 기능inject기본 입력 이벤트뿐만 아니라 요소에도 적용되므로 다음과 같이 사용하십시오.

<input id="test" v-model-inject = "testModel" />

그런 다음 jQuery를 통해 모든 항목을 업데이트하면 다음을 수행할 수 있다.

document.getElementById("test").dispatchEvent(this.injectEvent);

여기 JSFiddle: https://jsfiddle.net/q591gn01/

jQuery를 사용하는 대신 테스트 모델을 업데이트하는 글로벌 기능을 만들거나 Vuex https://vuex.vuejs.org/en/intro.html을 참조하십시오.

Vue를 사용할 때 dom을 jQuery로 업데이트하지 마십시오.

참조URL: https://stackoverflow.com/questions/46955230/vuejs-binding-not-working-if-update-by-jquery