프로그래밍 방식으로 변경된 요소의 v-모델 업데이트 방법

프로그래밍 방식으로 변경된 요소의 v-모델 업데이트 방법

나는 Checkbox용 JS 플러그인을 사용하고 있다.

이 플러그인은 확인란 상태를 모방한 스위치 버튼을 생성한다.

스위치 버튼이 토글되면checked확인란 값

<input type="checkbox" v-model="active" class="switch">
<script>
    var app = new Vue({
        el: '#app',
        data: {
            active: false
        }
    })
</script>

하지만, 그active데이터 값은 사용자가 확인란을 클릭할 때만 업데이트된다.확인란 변경checked프로그래밍 방식으로는 특성이 vue를 트리거하지 않는다.

vue를 업데이트하는 방법data입력 내용이 프로그래밍 방식으로 변경되는 경우예를 들어.$("#myinput").prop("checked",true)

Vue 업데이트:v-model의 재산은 언제나change* 이벤트가 트리거됨.트리거:

$("#myinput").prop("checked", true);
$("#myinput")[0].dispatchEvent(new Event('change')); // must trigger NATIVE event

데모:

new Vue({
  el: '#app',
  data: {
    active: false
  }
});

$("#via-jq").click(function() {
  let currChecked = $("#myinput").prop("checked");
  $("#myinput").prop("checked", !currChecked);
  $("#myinput")[0].dispatchEvent(new Event('change'));
})

<script src="https://unpkg.com/vue"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div id="app">
  <input id="myinput" type="checkbox" v-model="active" class="switch"> {{ active }}
</div>

<button id="via-jq">Toggle Via jQ</button>

* _{This is the case for checkboxes. The event varies according to input type. E.g. input event may trigger the update for other types of elements as well.}

참조URL: https://stackoverflow.com/questions/49712387/how-update-v-model-of-a-element-that-is-changed-programatically