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值更改的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

默认情况下，在每个输入事件之后，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修饰符。

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

1 个答案: