【Vue.js】フォームに入力した値をAPIのパラメータとして渡して、レスポンスをHTMLに表示させたいがうまく値が渡らない。

【実現したいこと】
数日前からVue.jsをさわり始めた初心者です。宜しくお願い致します。
楽天ゴルフ場詳細APIなるものを使用して、ゴルフ場を検索する簡単なアプリをvue.jsを使って作ろうとしています。
フォームを用意し、そこにゴルフ場名等のキーワードを入力すると、すぐさま(送信等せずともリアルタイムに)反映され、キーワードに一致したゴルフ場の件数を表示させるアプリになります。

インプットするパラメータとしては、キーワード、エリア等々ありますが、まずはキーワードだけにして、一致する件数をHTMLに表示させようとしています。

【現状】
とりあえず、APIは叩けており、全件（2055件）はヒットしているようですが、フォームに入力しても変化はないです。

【試してみたこと】
フォームに入力したものがすぐさま反映させるにはv-onを使用すればよいというのはわかったのですが、現状うまくいっていません。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <title>Vue.jsでゴルフ場検索</title>
7    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
8</head>
9
10<body>
11    <div id="form_input">
12        <p>キーワード</p>
13        <input @input="keyword = $event.target.value" :value="keyword">
14    </div>
15    <span id="api_output"></span>
16    <span>件ヒット</span>
17    <script src="main.js"></script>
18</body>
19
20</html>
21

js
1async function callApi() {
2    const base_url = "https://app.rakuten.co.jp/services/api/Gora/GoraGolfCourseSearch/20170623?format=json&";
3    const apiKey = "APIキー";
4    const areaCode = "";
5
6    var keyword = new Vue({
7        el: "#form_input",
8        data: {
9            keyword: ""
10        }
11    });
12    var url = base_url + "areaCode=" + areaCode + "&keyword=" + keyword.keyword + "&applicationId=" + apiKey
13
14    const res = await fetch(url);
15    const golfcourse = await res.json();
16    document.getElementById('api_output').innerHTML = golfcourse.count;
17}
18callApi();
19

【JSONデータ】

json
1{
2  "count": 7,
3  "page": 1,
4  "first": 1,
5  "last": 7,
6  "hits": 7,
7  "carrier": 0,
8  "pageCount": 1,
9  "Items": [
10    {
11      "Item": {
12        "golfCourseId": 10092,
13        "golfCourseName": "チサンカントリークラブ銭凾",
14        "golfCourseAbbr": "チサンCC銭凾",
15        "golfCourseNameKana": "ちさんかんとりーくらぶぜにばこ",
16        "golfCourseCaption": "チサンカントリークラブ銭凾は、PGMが保有運営するゴルフ場です。
17Tポイントカードがご利用いただけます。
18 
19札幌と小樽のほぼ中間に位置し、眼下に石狩湾を望み、三方を山に囲まれた大自然の中、キャディ付き5人乗り乗用カートでプレーが楽しめる18ホール。白樺やななかまど・桜・あかしやなどの樹木でセパレートされたホールはフラットの中にも豪快な打ち下ろしあり、谷越えありと変化に富み美しさと厳しさをかねそなえている。得にNo.13ホールは630ヤードもの距離がある最長ロングホール。石狩湾に向かって豪快な打ち下ろしの名物ホール。札樽自動車道の銭函ICを出るとコースまで3分と交通の便も良く、プレーの後は小樽見物と楽しんでみてはいかがですか？
20 
21※楽天GORAで表示しているプレー料金以外でのご利用はできません（メンバー料金等の楽天GORAで提供されていないプラン料金でのご予約はご遠慮いただいております）。",
22        "address": "北海道小樽市星野町74",
23        "latitude": 43.1256761,
24        "longitude": 141.1767656,
25        "highway": "札樽自動車道銭函",
26        "golfCourseDetailUrl": "https://booking.gora.golf.rakuten.co.jp/guide/disp/c_id/10092",
27        "reserveCalUrl": "https://search.gora.golf.rakuten.co.jp/cal/disp/c_id/10092",
28        "ratingUrl": "https://booking.gora.golf.rakuten.co.jp/voice/detail/c_id/10092",
29        "golfCourseImageUrl": "https://gora.golf.rakuten.co.jp/img/golf/10092/photo1.jpg",
30        "evaluation": 4.3
31      }
32    }

【わからないこと】
そもそもフォームの値をJS内の変数に渡すことはできるのでしょうか。
この先、どうしたら渡せるのか見当付かなく困っております。宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

v-modelディレクティブというものがあります。
（参考：Vue.js公式ドキュメント - フォーム入力バインディング）

<input v-model="keyword">
のように指定すると、

このテキストボックスの値を変更するとkeyword変数の値も変わる
逆に、keyword変数の値を変更するとテキストボックスの値も変わる

という動作をします。

（追記：v-onは、確かに、「テキストボックスの値が変わった」とか「ボタンをクリックした」というような操作がされたときに実行する関数を指定することが出来るのですが、今回の目的であればv-modelという仕組みがVue.jsに用意されているので、そちらを使った方がよいかと思います。）

投稿2021/06/18 17:42

編集2021/06/18 17:46

hallen0225

総合スコア587

tonkotsu_ramen

2021/06/19 09:43

アドバイスありがとうございます。v-modelを使用して色々試してみましたが、現状実現したいことはできておりません。keyword自体は動的に変化しているようなのですが、当然かもしれないのですが、その後のfetch以降の処理はformの値が変更されるたびに実行されるわけではないので、反映されません。 Vue.jsではformの値の変更に対し、その都度fetch以降の処理を実行できる方法はありますでしょうか。