前提
これからはじめるVue.js3実践入門p.178 5-1-2タブパネルを生成するをローカル登録にして実行したい。
実現したいこと
タブパネルを生成。
発生している問題・エラーメッセージ
実行しても白いブラウザ画面のままになる。
該当のソースコード
html
<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8" /><title>Vue.js</title><link rel="stylesheet" href="tabs.css" /></head><body><div id="app"> <div id="container"> <ul> <li v-for="tab in tabNames"> <a href="#" v-on:click.prepend="onclick(tab)">{{tabs[tab]}}</a> </li> </ul> <keep-alive> <component v-bind:is="currentTab"></component> </keep-alive> </div></div><script src="https://cdn.jsdelivr.net/npm/vue@3.2.29/dist/vue.global.js"></script><script src="tabs.js"></script></body></html>
javascript
const TabMember={ data() { return { name: '' } }, template:`<div class="tab"> <p>あなたもWINGSプロジェクトに参加しませんか？<br /> 現在、WINGSプロジェクトでは、ご一緒にお仕事ができる仲間を募集中です。</p> <label>名前：<input type="text" v-model="name" /></label> <input type="submit" value="登録" /> </div>`, activated() { console.log('tab-member is activated!!'); }, deactivated() { console.log('tab-member is deactivated!!'); }}; const TabNew={ components:{ 'tab-member':TabMember }, template:`<div class="tab"> <p>基礎からきっちり身に付くRuby入門書。Ruby 3対応<br /> 解説→例題→練習問題（理解度チェック）の3ステップで、基本テクニックを身につけます。</p> </div>`}; const TabEnv={ components:{ 'tab-member':TabMember, 'tab-new':TabNew }, template: `<div class="tab"> <p>開発環境の設定方法を図を交えて詳しく解説します。<br /> 紹介している各モジュールは、日々頻繁にバージョンアップが行われています。</p> </div>`}; Vue.createApp({ components:{ 'tab-member':TabMember, 'tab-new':TabNew, 'tab-env':TabEnv }, data(){ return{ current:'member', tabs:{ 'member':'メンバー募集', 'new':'新刊紹介', 'env':'環境構築設定' } }; }, methods:{ onclick(tab){ this.current=tab; } }, computed:{ tabNames(){ return Object.keys(this.tabs); }, currentTab(){ return `tab-$(this.current)`; } } }).mount('#app');
css
#container { width: 450px;} #container > ul { margin: 0px; padding: 0px;} #container > ul li { list-style-type: none; float: left; line-height: 160%; width: 150px; height: 40px;} #container > ul li a { display: block; text-align: center; text-decoration: none; background-color: #f8f1b3; color: #000; border: solid 1px Black;} #container > div { border: 1px solid #c0c0c0; background-color: #fcfbf4; border-top: none; padding: 15px;}
試したこと
javascriptを本の通りのコードで実行すると正しく実行されたので、javascriptが正しくないと思います。
補足情報（FW/ツールのバージョンなど）
Vue 3.2.29
0 コメント