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

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

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

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

Q&A

解決済

1回答

722閲覧

Vewインスタンス中のdateプロパティの配列が認識されない

wakita_minaho

総合スコア9

Vue.js

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

0グッド

0クリップ

投稿2020/07/29 09:37

前提・実現したいこと

Vew.jsを用いて、サムネイルとモーダル画面からなる画面ビューワーを作成しています。
以下のようなエラーメッセージが出たのですが、作成したVewインスタンスのdateの中には、imageプロパティを用意しており、困っています。

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

[Vue warn]: Property or method "images" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. (found in <Root>) warn @ vue.js:634 warnNonPresent @ vue.js:2047 has @ vue.js:2092 eval @ VM399:3 Vue._render @ vue.js:3551 updateComponent @ vue.js:4067 get @ vue.js:4478 Watcher @ vue.js:4467 mountComponent @ vue.js:4074 Vue.$mount @ vue.js:9044 Vue.$mount @ vue.js:11944 Vue._init @ vue.js:5012 Vue @ vue.js:5078 (anonymous) @ script.js:40

該当のソースコード

index.html

1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="app"> 9 <div class="wrap"> 10 <image-thumbnail 11 v-for="(img,i) in images" 12 :key="i" 13 :path="img.path" 14 @clickimage="onSelectImage(img.path)" 15 ></image-thumbnail> 16 </div> 17 </div> 18 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 19 <script src="script.js"></script> 20 </body> 21</html> 22 23

script.js

1const imageThumbnail = Vue.component('image-thumbnail',{ 2 props:{ 3 path:{ 4 type:String, 5 default:'' 6 } 7 }, 8 template:` 9 <div 10 class="img-box" 11 :style="{backgroundImage:'url('+ path +')'}" 12 @click="$emit(clickimage)" 13 ></div>` 14}); 15 16const modal = Vue.component('modal',{ 17 props:{ 18 isShown:{ 19 type:Boolean, 20 default:false 21 }, 22 imagePath:{ 23 type:String, 24 default:'' 25 } 26 }, 27 template:` 28 <div v-if="isShown" 29 class="modal" 30 @click="$emit('close')"> 31 <img 32 class="modal-image" 33 :src="imagePath" 34 alt="selectedImage" 35 /> 36 </div>` 37 }); 38 39//次の行がエラーポイントの40行目 40const app = new Vue({ 41 el:'#app', 42 components:{ 43 'image-thumbnail':imageThumbnail, 44 modal 45 }, 46 date(){ 47 return{ 48 isShown:false, 49 selectedImage:'', 50 images:[{ 51 path:'img/img1.jpg', 52 },{ 53 path:'img/img2.jpg', 54 },{ 55 path:'img/img3.jpg', 56 },{ 57 path:'img/img4.jpg', 58 },{ 59 path:'img/img5.jpg', 60 },{ 61 path:'img/img6.jpg', 62 },{ 63 path:'img/img7.jpg', 64 },{ 65 path:'img/img8.jpg', 66 },{ 67 path:'img/img9.jpg' 68 }] 69 }; 70 } 71}); 72

試したこと

imagesを空の配列にしてみましたが、関係ありませんでした。

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Vue.jsにおいて、コンポーネントの「データ」を定義するオプションは、dateではなく、dataです。
語句を修正して試してみてください。

公式サイト該当箇所

投稿2020/07/29 12:57

NozomuIkuta

総合スコア1260

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wakita_minaho

2020/07/29 13:07

すいません、誤字でした、、気づけなかったです。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問