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

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

新規登録して質問してみよう
ただいま回答率
86.02%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

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

yukkuri_55
yukkuri_55

総合スコア226

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0グッド

0クリップ

486閲覧

投稿2022/08/24 04:31

前提

マイナビ出版 HTML&CSS,JavaScriptのきほんのきほんという本を読んでいます。
HTML+CSS+JavaScript で Vue.js を使って画像を3枚表示するプログラムを作っています。
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です。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

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

投稿2022/08/24 04:37

Matsumon0104

総合スコア1000

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

yukkuri_55

2022/08/24 04:50

<script> $('#img_unit').html('ここに画像リストが表示されます。'); $('#img_unit').css('margin-top','100px'); $.getJSON('https://h2o-space.com/htmlbook/images.php', function(data) { for(var i=0; i<data.length; i++){ $('<div class="photo"></div>') .append('<img src="'+data[i].path+'">') .append('<div class"inner"><p>' + data[i].caption + '<span>' + data[i].name + '</span></p></div>') .appendTo('#img_unit'); } }); </script> <script> var app = new Vue({ el:'#img_unit', data: { Photos: [] }, created: function() { var self = this; $.getJSON('https://h2o-space.com/htmlbook/images.php',function(data) { self.Photos = data; }); } }); </script> このように、createdの出る位置を後ろに回したところ、うまく画像が表示されました。
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>

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。