前提・実現したいこと
VuejsのComponentを利用してfetchで取得してした配列の数分だけ並べて表示したい
またfetchで取得した配列内のURLに応じてhrefを変更したい
backeendはNode+expressで実装しようとして居ます
fetch で特定のURLでGETした場合 Backendで特定のディレクトリをreadしてファイル名を取得してfrontend に返そうと考えて居ます。
何も表示されない状況です 誤っている箇所を教えていただきたいです
確認したこと
chromeの開発者ビューのデバッグ実行を実施
以下のjson.fileListに目的の文字列(URL)がArrayで格納されていることを確認した
this.imageList = json.fileList;
発生しているエラー
vue.js:597 [Vue warn]: data functions should return an object:
https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
vue.js:597 [Vue warn]: Property or method "list" 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.
該当のソースコード
javascript
1var express = require('express'); 2var app = express(); 3var config = require('./config'); 4var fs = require('fs'); 5 6app.get('/',function(req,res){ 7 res.sendfile(__dirname + '/index.html'); 8}); 9 10app.get('/:id',function(req,res){ 11 res.sendfile(__dirname + '/' + req.params.id); 12}); 13 14app.get('/imageList/:id',function(req,res){ 15 var dirName = req.params.id; 16 fs.readdir(__dirname + '/images/' + dirName,function(err,files){ 17 if(err) throw err; 18 var fileList = files.filter(function(file){ 19 return /.*.(jpg|png)$/.test(file); //絞り込み 20 }); 21 var fileListExt = []; 22 fileList.forEach(file => { 23 fileListExt.push('/images/' + dirName+ '/' + file); 24 }); 25 res.json({fileList : fileListExt}); 26 }); 27}); 28 29app.use('/css', express.static('css')); 30app.use('/images', express.static('images')); 31app.use('/js', express.static('js')); 32app.use('/fonts', express.static('fonts')); 33 34app.listen(config.port);
HTML
1<!DOCTYPE HTML> 2<!-- 3 Aesthetic by gettemplates.co 4 Twitter: http://twitter.com/gettemplateco 5 URL: http://gettemplates.co 6--> 7<html> 8 9<head> 10 <meta charset="utf-8"> 11 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 12 13 <!-- Animate.css --> 14 <link rel="stylesheet" href="css/animate.css"> 15 <!-- Icomoon Icon Fonts--> 16 <link rel="stylesheet" href="css/icomoon.css"> 17 <!-- Bootstrap --> 18 <link rel="stylesheet" href="css/bootstrap.css"> 19 <!-- Theme style --> 20 <link rel="stylesheet" href="css/style.css"> 21 22 <!-- Magnific Popup --> 23 <link rel="stylesheet" href="css/magnific-popup.css"> 24 25 <!-- Modernizr JS --> 26 <script src="js/modernizr-2.6.2.min.js"></script> 27 <!-- FOR IE9 below --> 28 <!--[if lt IE 9]> 29 <script src="js/respond.min.js"></script> 30 <![endif]--> 31 32</head> 33 34<body> 35 36 <div class="container-fluid" id="fh5co-image-grid"> 37 <div class="grid" id="image-area"> 38 <div class="grid-sizer"></div> 39 <image-component 40 v-for="elm in list" 41 v-bind:elm = "elm" 42 v-bind:key="elm.key" 43 v-bind:href="elm.value" 44 v-bind:src="elm.value"> 45 </image-component> 46 </div> 47 </div> 48 49 <!-- jQuery --> 50 <script src="js/jquery.min.js"></script> 51 52 <!-- Vue JS --> 53 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 54 <!-- MAIN JS --> 55 <script src="js/main.js"></script> 56 57 <script> 58 var imageList; 59 document.addEventListener('DOMContentLoaded', function () { 60 fetch('/imageList/kyoto').then(function (response) { 61 return response.json(); 62 }).then(function (json) { 63 this.imageList = json.fileList; 64 }); 65 }); 66 Vue.component('image-component', { 67 props: ['elm'], 68 // template : '<li>{{elm}}</li>' 69 template: '<div class="grid-item item animate-box" data-animate-effect="fadeIn">\ 70 <a href="elm.value" class="image-popup" title="Name of photo or title here">\ 71 <div class="img-wrap">\ 72 <img src="elm.value" alt="" class="img-responsive">\ 73 </div>\ 74 <div class="text-wrap">\ 75 <div class="text-inner popup">\ 76 <div>\ 77 <h2>Name of photo or title here</h2>\ 78 </div>\ 79 </div>\ 80 </div>\ 81 </a>\ 82 </div>' 83 }) 84 85 const image = new Vue({ 86 el: '#image-area', 87 data: imageList 88 }) 89 </script> 90</body> 91 92</html>
回答3件
あなたの回答
tips
プレビュー