Использование «этого» в Vuejs 2.0

Question

Я новичок в VueJS. У меня возникла небольшая проблема, из-за которой я не мог понять. Надеюсь, кто-то может дать мне подсказку.

Я создаю кнопку голосового поиска, в основном, когда я нажимаю кнопку голоса, тогда она записывает мой голос и распечатывает его на входной атрибут в форме.

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

Это мой сценарий в 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> 

Я могу получить текст с голосовым recoginization, но не может показать его в форме ввода.

Спасибо,

Answer 1

Вместо использование function использовать стрелки синтаксиса ES6, который держит объем этого нетронутого, как это:

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

или другой вариант, чтобы сохранить this в каком-либо другом переменном и использовании что переменная, как следующее:

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

Вы можете посмотреть на мой аналогичный ответ here.