vue.jsで郵便番号検索から住所を表示

vue.jsの勉強で以下HPを参考に郵便番号検索から住所を表示する仕組みを作っています。
ID名以外全て参考HPを同じにしているはずなのですが、検索ボタンを押しても何も反応しません。
これは何が違うのでしょうか？

https://wk-partners.co.jp/homepage/blog/hpseisaku/javascript/vuejs/

HTML
1<html>
2
3<head>
4	<meta charset="UTF-8">
5	<title></title>
6	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
7	<link rel="stylesheet" type="text/css" href="./style.css">
8</head>
9
10<body>
11		<div id="app7">
12			<p>郵便番号を入れると住所がでるよ</p>
13			<!-- :placeholderはv-bind:placeholderの短縮形 -->
14			<input v-model="inputZip" :placeholder="computedZip" v-on:keypress.enter="getAddress(computedZip)" maxlength="7">
15			<!-- @clickはv-on:clickの短縮形 -->
16			<button @click="getAddress(computedZip)">boom</button>
17			<div class="result">
18				{{results}}
19			</div>
20		</div>
21	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
22</body>

vue.js
1const URL_API = "https://api.zipaddress.net/";
2const vm = new Vue ({
3  el: '#app7',
4  data: {
5    inputZip:'',
6    defaultZip:'1000000',
7    results:''
8  },
9  computed: {
10    computedZip: function(){
11      // inputZipが半角数字且つ7桁であればinputZipを、違ったらdefaultZipを返す
12      return !isNaN(this.inputZip) && this.inputZip.length == 7 ? this.inputZip : this.defaultZip
13    }
14  },
15  methods: {
16    getAddress: function(z){
17      let params = { params: { zipcode: z } };
18      // リクエストを送信
19      axios
20        .get(URL_API, params)
21        .then(res => {
22          this.results = res.data.code == 200 ? res.data.data.fullAddress : res.data.message;
23      });
24    }
25  }
26})

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

回答2件

HTML内で自分の作成したJavaScriptファイル(vue.js?)を呼んでいないからです。
このサンプル通りに無理矢理動作させるのであれば……。
axios.min.jsを指定している<script>タグの後ろで、自分の作成したファイルの呼び出しを追加してみてください。
（ブラウザの描写タイミング的にはもう少し良い書き方がありますが、とりあえずです）

投稿2022/03/04 06:33