Vue v-model.lazy 或 @change 不更新我的 Vue 数据

Question

使用 chrome 内置语音识别功能，我用口语更改了 textarea 值。值改变后，我的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);
        },

textarea 值更改 R 的 Javascript 是 textarea

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;
}

如果 textarea 的 innerhtml 发生变化，我希望我的数据也更新。

Answer 1

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 修饰符。