非同期リクエスト時の待ち受けメッセージを表示する

前提

本、これからはじめるvue.js3実践入門を勉強してます。本ではコンポーネントがローカル登録になっていないのでローカル登録に直してます。

実現したいこと

これからはじめるvue.js3実践入門p.191、『非同期リクエスト時の待ち受けメッセージを表示する』
suspense使わない
ローカル登録に変更

発生している問題・エラーメッセージ

何も表示されずコンソールには以下が表示されました。

SyntaxError: Unexpected token '.'. Expected a ':' following the property name 'Vue'.

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8" />
5<title>Vue.js</title>
6</head>
7<body>
8<div id="app">
9  <my-heavy />
10</div>
11<script src="https://cdn.jsdelivr.net/npm/vue@3.2.29/dist/vue.global.js"></script>
12<script src="suspense_obj.js"></script>
13</body>
14</html>

javascript
1const MyHeavy={
2  Vue.defineAsyncComponent({
3    loader() {
4      return new Promise((resolve, reject) => {
5        setTimeout(() => {
6          resolve({
7            data() {
8              return { name: 'Suspense' };
9            },
10            template: `<div>お待たせしました。{{ name }}です！</div>`
11          });
12        }, 5000);
13      })
14    },
15
16    loadingComponent: {
17      template: `Now Loading...`
18    },
19    delay: 500,
20    errorComponent: {
21      template: `Loading Error!!`
22    },
23    timeout: 7000,
24    suspensible: false
25  })
26};
27
28
29Vue.createApp({
30  components:{
31    'my-heavy':MyHeavy
32  }
33}).mount('#app');
34

試したこと

本の通りにjavascriptを変更したら正しく実行されたのでjavascriptの問題だと思います。

補足情報（FW/ツールのバージョンなど）

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

回答1件

ベストアンサー

質問のコードだとconst MyHeavy にオブジェクトを代入するものになってしまっていますが、代入したいのは VueのメソッドVue.defineAsyncComponentが返す値ではないですか？そうだとすれば一番外側の { ･･･ }が不要なので、以下のように削除するとどうでしょう？

diff
1- const MyHeavy={
2+ const MyHeavy=

diff
1      timeout: 7000,
2      suspensible: false
3-  })
4+  });
5- };

投稿2022/09/25 14:52

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！