2017-01-24 16 views
1

VueJSの新機能です。 私はそれを理解できないという小さな問題を抱えています。誰かが私にヒントを与えることを願っています。Vuejs 2.0で "this"を使用する

私は音声検索ボタンを作成していますが、基本的には音声ボタンをクリックすると音声が録音され、フォームの入力属性に出力されます。

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

これは私が音声recoginizationからテキストを取得することができていますが、入力フォームでそれを表示することはできません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> 

の私のスクリプトです。

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

または他のオプション他のいくつかの変数と使用中thisを保存することです。その代わり、このように、この未使用の範囲を維持しES6のfunction利用矢印構文を使用しての

答えて

3

おかげで、以下のようなその変数は:

   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を見てすることができます。

+0

完璧に動作します。ありがとう – trinhdh

関連する問題