Vue v-model.lazy или @change не обновляет мои данные Vue

Question

Благодаря встроенной функции распознавания голоса Chrome я изменяю значение текстовой области с помощью произнесенных слов. После изменения значения мои данные 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>

Код Vue

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, где значение textarea изменяется R - текстовая область

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 текстовой области изменится, я хочу, чтобы мои данные также обновлялись.

Answer 1

Документы на v-model.lazy

По умолчанию v-модель синхронизирует ввод с данными после каждого события ввода (за исключением композиции IME, как указано выше). Вы можете добавить модификатор lazy для синхронизации после событий изменения.

Прямо сейчас вы используете и 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.