v-model 값을 JS에서 변경하는 방법

v-model 값을 JS에서 변경하는 방법

나는 구글 자동 완성 주소 양식을 사용하고 있다.구글 공식 웹페이지에서 예를 찾았다.별일 없다.모든게 잘 돼! 하지만 이건 자바스크립트야.

나는 Vue 애플리케이션을 가지고 있고 JS 스크립트에서 텍스트 입력 값을 변경하는 방법이 마음에 들지 않는다.그 아이디어는 내가 메인 입력에서 무언가를 변경할 때, JS 이벤트 수신기는 다른 입력에 대한 값을 변경해야 한다는 것이다.

 document.getElementById(addressType).value = val;

문제는 "문서"를 사용하여 값을 변경해야 한다는 것이다.

 document.getElementById('street_number').value

난 너트와 비슷한 걸 갖고 싶어.

 <input type="text" v-model="input.address" ref="addressRef">

그리고 값을 읽으려면:

export default {
        data() {
            return {
                input: {
                    address: "",
                    ...
                }

            };
        },
        methods: {
            test() {
                console.log(this.input.address);
                console.log(this.$refs.addressRef);
        }
       }

그래서 질문은 다음과 같다.

• JS 코드에서 바인딩 값을 업데이트하도록 설정하는 방법"GetElementById("id")를 사용하기 때문에 현재 값이 null임.값 = val"

발산할 수 있다.input어떤 일이 있은 후에.v-model그것의 갱신에 의존하다.value:

let el = document.getElementById("id");
el.value = val;
el.dispatchEvent(new Event('input'));

작동 중:

Vue.config.devtools = false

const app = new Vue({
  el: '#app',
  
  data: {
    message: null
  },
  
  methods: {
    updateBinding() {
      let el = document.getElementById("input");
      el.value = 'Hello!';    
      el.dispatchEvent(new Event('input'));
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="updateBinding">Click me </button><br>
  <input id="input" v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</div>

참조URL: https://stackoverflow.com/questions/56348513/how-to-change-v-model-value-from-js