javascript - 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);
        },

文本区域值改变的 Javascript 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

Docs on v-model.lazy

By default, v-model syncs the input with the data after each input event (with the exception of IME composition as stated above). You can add the lazy modifier to instead sync after change events.

现在您正在使用 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 的值同步回您的 prop。

如果你想让 'textboxInput` 监听输入，你应该移除 .lazy 修饰符。