使用“这个"在 Vuejs 2.0 中

本文介绍了使用“这个"在 Vuejs 2.0 中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我是 VueJS 的新手.我有一个小问题，我无法弄清楚.希望有人能给我一个提示.

I am new in VueJS. I am having a small problem that i could not figure it out. Hope some one can give me a hint.

我正在创建一个语音搜索按钮，基本上当我单击语音按钮时，它会记录我的声音并将其打印到表单中的输入属性.

I am creating a voice search button, basically when i click the voice button then it would record my voice and print it out to the input attribute in form.

<input type="text" name="inputSearch" id="inputSearch"
v-model="inputSearch" class="form-control" x-webkit-speech>

这是我在 VueJS 中的脚本

This is my script in VueJS

<script>
export default {
        data() {
          return {
                    inputSearch: '',
                    show: false
                 }
        },
        methods: {
          voiceSearch: function(event){
                    this.inputSearch = '';
                    this.show = false;
                    if (window.hasOwnProperty('webkitSpeechRecognition')) {
                    var recognition             = new webkitSpeechRecognition();
                    recognition.continuous      = false;
                    recognition.interimResults  = false;
                    recognition.lang            = "en-US";
                    recognition.start();
                    recognition.onresult = function(e) {
                    this.inputSearch = e.results[0][0].transcript;
                     recognition.stop();
                        };
                    recognition.onerror = function(e) {
                          alert('There are something wrong...');
                          recognition.stop();
                    };



                    }else {
                      alert('Your browser does not support HTML5/WebKitSpeech. You are not able to use this functionality');
                    }

          }

        }
    }
</script>

我可以从语音识别中获取文本，但无法在输入表单中显示.

I am able to get the text from the voice recoginization but can not show it in the input form.

谢谢，

推荐答案

使用 ES6 的箭头语法代替 function ，这样可以保持 this 的作用域不变，如下所示:

Instead of using function use arrow syntax of ES6, which keeps scope of this intact, like this:

                recognition.onresult = (e) => {
                   this.inputSearch = e.results[0][0].transcript;
                   recognition.stop();
                };
                recognition.onerror = function(e) {
                      alert('There are something wrong...');
                      recognition.stop();
                };

或其他选项是将 this 保存在其他变量中并使用该变量，如下所示:

or other option is to save this in some other variable and use that variable like following:

                var that = this
                recognition.onresult = function(e) {
                  that.inputSearch = e.results[0][0].transcript;
                  recognition.stop();
                };
                recognition.onerror = function(e) {
                      alert('There are something wrong...');
                      recognition.stop();
                };

您可以在此处查看我的类似答案.

You can have a look at my similar answer here.

这篇关于使用“这个"在 Vuejs 2.0 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！