前提
本、これからはじめるvue.js3実践入門を勉強してます。本ではコンポーネントがローカル登録になっていないのでローカル登録に直してます。
実現したいこと
これからはじめるvue.js3実践入門p.191、『非同期リクエスト時の待ち受けメッセージを表示する』
suspense使わない
ローカル登録に変更
発生している問題・エラーメッセージ
何も表示されずコンソールには以下が表示されました。
SyntaxError: Unexpected token '.'. Expected a ':' following the property name 'Vue'.
該当のソースコード
html
<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8" /><title>Vue.js</title></head><body><div id="app"> <my-heavy /></div><script src="https://cdn.jsdelivr.net/npm/vue@3.2.29/dist/vue.global.js"></script><script src="suspense_obj.js"></script></body></html>
javascript
const MyHeavy={ Vue.defineAsyncComponent({ loader() { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ data() { return { name: 'Suspense' }; }, template: `<div>お待たせしました。{{ name }}です！</div>` }); }, 5000); }) }, loadingComponent: { template: `Now Loading...` }, delay: 500, errorComponent: { template: `Loading Error!!` }, timeout: 7000, suspensible: false })}; Vue.createApp({ components:{ 'my-heavy':MyHeavy }}).mount('#app');
試したこと
本の通りにjavascriptを変更したら正しく実行されたのでjavascriptの問題だと思います。
補足情報（FW/ツールのバージョンなど）
vue3.2.29
0 コメント