前提・実現したいこと
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/ツールのバージョンなど)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/29 13:07