Vue v-model.lazy 또는 @change가 내 Vue 데이터를 업데이트하지 않음

Vue v-model.lazy 또는 @change가 내 Vue 데이터를 업데이트하지 않음

음성 인식에서 크롬 빌드를 사용하여 나는 구어체로 텍스트 영역 값을 변경한다.값이 변경된 후 vue 데이터가 업데이트되지 않는다.

나는 이미 v-model.lazy, @change, v:bind를 시도했다.

Vue 템플릿

<div class="form-group">
    <textarea v-model.lazy="textboxInput" contenteditable="true" @change="onDivInput($event) " class="form-control" id="result" rows="1" name="inputData"></textarea>
 </div>

부에 코드

export default {
    data() {
        return {
            result: [],
            textboxInput: '',
            session_id: this.sessionid,
            user: this.userid,
            edit: false,
            roundRobin: JSON.parse(this.roundrobin),
        }
    },
    props: {
        sessionid: '',
        userid: '',
        roundrobin: '',

    },
    mounted() {
        this.getResult();
        this.listen();
        this.mod();

    },


    methods: {
        onDivInput: function (e) {

            this.textboxInput = e.target.innerHTML;
            console.log(e);
        },

텍스트 영역 값이 변경되는 Javascript는 텍스트 영역임

try {
    let finalTranscripts = '';
    if ('webkitSpeechRecognition' in window && hasUserMedia) {
        let speechRecognizer = new webkitSpeechRecognition();
        speechRecognizer.continuous = false;
        speechRecognizer.interimResults = true;
        speechRecognizer.lang = 'nl-be';
        speechRecognizer.start();



        speechRecognizer.onresult = function (event) {
            let interimTranscripts = '';
            for (let i = event.resultIndex; i < event.results.length; i++) {
                let transcript = event.results[i][0].transcript;
                transcript.replace("\n", "<br>");
                if (event.results[i].isFinal) {
                    finalTranscripts += transcript;
                } else {
                    interimTranscripts += transcript;
                }
            }
            r.innerHTML = finalTranscripts + interimTranscripts;


        }


        ;
        speechRecognizer.onerror = function (event) {
            speechRecognizer.stop();
        };
    } else {
        r.innerHTML = 'Your browser is not supported. If google chrome, please upgrade!';
    }
} catch (ex) {
    e.innerHTML = ex;
}

텍스트 영역의 innerhtml이 변경되면 내 데이터도 업데이트하십시오.

v-model.lazy에 대한 문서

기본적으로 v-model은 각 입력 이벤트 후 입력을 데이터와 동기화한다(위에서 설명한 IME 구성은 제외).이벤트 변경 후 동기화할 게으른 수식어를 추가할 수 있다.

현재 v-model.lazy(변경 이벤트 후 동기화)와 @change(이름에 있는 것, 변경 이벤트도 청취)를 모두 사용하고 있는 경우.너무 많아. v-model.lazy="textboxInput"사실 의 짧은 코드다.:value="textboxInput" @change="textboxInput = $event.target.value".그러니까 실제로 @change를 두 번 듣고 있는 거구나.

그냥 사용해도 된다.

    <textarea v-model.lazy="textboxInput" contenteditable="true" class="form-control" id="result" rows="1" name="inputData"></textarea>

그것은 이미 e.target.value의 값을 당신의 프로펠러로 다시 동기화시킨다.

입력을 듣기 위해 'textboxInput'을 하려면 .lazy 수식어를 제거해야 한다.

참조URL: https://stackoverflow.com/questions/54047235/vue-v-model-lazy-or-change-does-not-update-my-vue-data