Vue.js 画像の表示がうまくいかない

前提

マイナビ出版 HTML＆CSS,JavaScriptのきほんのきほんという本を読んでいます。
HTML+CSS+JavaScript で Vue.js を使って画像を３枚表示するプログラムを作っています。
JQuery.js まではうまくいったのですが、最後の Vue.js を使っての画像表示に失敗します。

実現したいこと

画像の表示

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

TypeError: Cannot read properties of undefined (reading 'path')
    at Proxy.eval (eval at createFunction (https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js:11698:14), <anonymous>:3:121)
    at Vue._render (:3572:24)
    at Vue.updateComponent (:4082:23)
    at Watcher.get (:4494:27)
    at new Watcher (:4483:14)
    at mountComponent (:4089:5)
    at Vue.$mount (:9088:12)
    at Vue.$mount (:11993:18)
    at Vue._init (:5026:12)
    at new Vue (https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js:5092:10) {stack: 'TypeError: Cannot read properties of undefine…elivr.net/npm/vue@2.6.14/dist/vue.js:5092:10)', message: 'Cannot read properties of undefined (reading 'path')'}

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js:9099
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

該当のソースコード

index.html

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <meta name="viewport" content="width=device-width">
6
7        <title>My Photo</title>
8
9        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
10        <link rel="stylesheet" href="css/style.css">
11    </head>
12
13    <body>
14        <header>
15            <h1>My Photo</h1>
16        </header>
17
18        <div class="container">
19            <div id="img_unit">
20                <div class="photo" v-for=""Photo in Photos">
21                    <img :src="Photo.path">
22                    <div class="inner"><p>{{Photo.caption}}<span>{{Photo.name}}</span></p></div>
23                </div>
24            </div>
25
26            <div id="vue_unit">
27                {{ message }}
28            </div>
29
30        </div><!-- container -->
31        <script src="js/jquery-3.6.0.min.js"></script>
32        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
33        <script>
34            var app = new Vue({
35                el:'#img_unit',
36                data: {
37                    Photos: []
38                },
39                created: function() {
40                    var self = this;
41                    $.getJSON('https://h2o-space.com/htmlbook/images.php',function(data) {
42                        self.Photos = data;
43                    });
44                }
45            });
46        </script>
47        <script>
48            $('#img_unit').html('ここに画像リストが表示されます。');
49            $('#img_unit').css('margin-top','100px');
50            $.getJSON('https://h2o-space.com/htmlbook/images.php', function(data) {
51                for(var i=0; i<data.length; i++){
52                    $('<div class="photo"></div>')
53                    .append('<img src="'+data[i].path+'">')
54                    .append('<div class"inner"><p>' + data[i].caption + '<span>' + data[i].name + '</span></p></div>')
55                    .appendTo('#img_unit');
56                }
57            });
58        </script>
59    </body>
60</html>

style.css

css
1body {
2    margin:0;
3    padding:0;
4    background-color: rgba(26,55,229,0.06);
5}
6
7.container {
8    max-width:600px;
9    margin: 0 auto;
10    box-shadow: 0px 0px 3px rgba(0,0,0,.3);
11}
12
13img {
14    width:100%;
15    margin:0;
16    vertical-align:top;
17}
18
19header {
20    background: #007acc;
21    color: #fff;
22    position:fixed;
23    top:0;
24    width:100%;
25    z-index:100;
26}
27
28header h1 {
29    margin:0;
30    font-size:25px;
31    padding:5px;
32    text-align:center;
33    font-family: 'Open Sans Condensed', sans-serif;
34}
35
36.photo{
37    position:relative;
38}
39.photo .inner {
40    position: absolute;
41    bottom:0;
42    width:100%;
43    background-color: rgba(0,0,0,5);
44    font-size:10px;
45    color:#fff;
46    margin:0;
47}
48.inner p {
49    padding:20px;
50}
51.inner span {
52    margin-left: 10px;
53}

試したこと

Photo.path の path が定義されていない？とでているので、path を定義しようとしましたが、
やり方がわからず、どうしたらいいものか悩んでいます。

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

IDE:Visual Studio Code 1.70.2
JQuery: 3.6.0
Vue: 2.6.14
getJSON('https://h2o-space.com/htmlbook/images.php の URL はテキストの練習用のJSONです。

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

回答1件

ベストアンサー

createdの実行はインスタンス生成時に行われますが、内部で利用されている「getJson」が非同期のため、エレメントのレンダー時には「Photos」の内容が存在しないのではないでしょうか。

投稿2022/08/24 04:37

Matsumon0104

総合スコア1005

yukkuri_55

2022/08/24 04:50

Matsumon0104

2022/08/24 04:56

非同期のタイミングによっては、同じ画面でもエラーが発生するときと発生しないといったことが起きえます。 (修正いただいたのプログラムも同様) 実践では、データが取得されるまではダミーを表示しておくといったソースの方がよいかもしれません。 ----- 例 <div v-if="Photos.length > 0" class="photo" v-for=""Photo in Photos"> <img :src="Photo.path"> <div class="inner"><p>{{Photo.caption}}<span>{{Photo.name}}</span></p></div> </div> <div v-else> <img src="dummy.png"> </div>

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