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
利用矢印構文を使用しての
完璧に動作します。ありがとう – trinhdh