質問編集履歴
1
解決方法を記入
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -88,4 +88,59 @@
|
|
|
88
88
|
|
|
89
89
|
|
|
90
90
|
###補足情報(言語/FW/ツール等のバージョンなど)
|
|
91
|
-
Vue.js 2.2.4
|
|
91
|
+
Vue.js 2.2.4
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
###追記：解決しました
|
|
95
|
+
mio-cさんの回答から、もう1回音声入力の結果をVueで受け取る方法を考え直してみてうまく実装することができました！
|
|
96
|
+
質問のタイトルとは方法になるので、解決方法を記載しておきます。
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
```javascript
|
|
100
|
+
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
|
|
101
|
+
// ↓音声入力APIのインスタンスを入れる変数
|
|
102
|
+
var rec = null;
|
|
103
|
+
|
|
104
|
+
//コードが変わったときの処理はVueの外に出す↓
|
|
105
|
+
var codeChange = function(val, setId, url){
|
|
106
|
+
if(val==""){
|
|
107
|
+
$("#"+setId).val("");
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
var json = ajax_json(url, val);
|
|
111
|
+
json.done(function(data){
|
|
112
|
+
if(data == null){
|
|
113
|
+
$("#"+setId).val("");
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
116
|
+
$("#"+setId).val(data["名称"]);
|
|
117
|
+
});
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
コンポーネントのテンプレートの中に、マイクを起動するリンクも入れてしまってクリックした時の処理をコンポーネントのmethodsの中に移動させました。
|
|
121
|
+
```javascript
|
|
122
|
+
methods:{
|
|
123
|
+
onChange: function(){
|
|
124
|
+
var val = this.$refs.codesearch.value;
|
|
125
|
+
codeChange (val, this.nameId, this.url);
|
|
126
|
+
},
|
|
127
|
+
onMicStart: function(){
|
|
128
|
+
var setId = this.nameId;
|
|
129
|
+
var url = this.url;
|
|
130
|
+
if(rec === null){
|
|
131
|
+
// 音声入力のAPI
|
|
132
|
+
rec = new webkitSpeechRecognition();
|
|
133
|
+
:
|
|
134
|
+
:
|
|
135
|
+
}
|
|
136
|
+
// 音声入力が終わったときの処理はonresultに入れる
|
|
137
|
+
// Vueの中でセットしてもちゃんと動いた
|
|
138
|
+
rec.onresult = function(event){
|
|
139
|
+
var val = event.results[0][0].transcript;
|
|
140
|
+
codeChange (val, setId, url);
|
|
141
|
+
}
|
|
142
|
+
rec.start();
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
やってみれば単純だったのですが、既存の処理をそのまま使おうとしすぎて思いつきませんでした。。。
|
|
146
|
+
ありがとうございました！！
|