前提・実現したいこと
Vue.jsを使ってサイトを作っています。
持っている情報だけ変えた同じ形式のボックスを複数個並べたいとき、
どのように情報を持つのが正解(常識)なのかわかりません。
ひとまずJSONファイルに入れて作ってみましたが、
- うまいこと画像が指定できず、createdで一旦requireする必要がある?
- vue-routerを利用しているのだが、外部リンクと内部リンクで処理を変える必要がある?
といった問題が発生します。
vueのscriptの方にconst data = [...]
といった形で入れたほうが良いのでしょうか。
今回扱おうとしている情報について
- 日常的に増えるようなものではない(ブログ的ではない)
- ユーザー側から情報の書き換えは絶対に発生しない
- 1つの情報単位と画像は紐付いている
今回の例だと、idが1の情報と1.pngは紐付いている
- 今はvue-routerの範囲内のリンクしか貼る予定はないが、今後どうなるかはわからない
該当のソースコード
vue
1<template> 2<div v-for='content in contents' :key='content.id'> 3 4 <template v-if="content.path"> 5 <router-link :to="content.path"> 6 <figure> 7 <img :src="content.src"> 8 </figure> 9 <h3>{{ content.title }}</h3> 10 <p>{{ content.comment }}</p> 11 </router-link> 12 </template> 13 14 <template v-else> 15 <a :href="content.url"> 16 <figure> 17 <img :src="content.src"> 18 </figure> 19 <h3>{{ content.title }}</h3> 20 <p>{{ content.comment }}</p> 21 </a> 22 </template> 23 24</div> 25</template> 26 27<script> 28const data = require('@/assets/test.json') 29 30export default { 31 name: 'TOP', 32 data: () => ({ 33 contents: data, 34 }), 35 created: function () { 36 for (var i in this.contents) { 37 var image = this.contents[i]['image'] 38 this.contents[i]['src'] = require('@/assets/' + image + '') 39 } 40 } 41} 42</script>
json
1[ 2 { 3 "id": 1, 4 "title": "表示テスト_1", 5 "comment": "春は曙", 6 "image": "1.png", 7 "path": "/1", 8 "url": "" 9 }, 10 { 11 "id": 2, 12 "title": "表示テスト_2", 13 "comment": "夏は夜", 14 "image": "2.png", 15 "path": "/2", 16 "url": "" 17 }, 18 { 19 "id": 3, 20 "title": "表示テスト_3", 21 "comment": "秋は夕暮れ", 22 "image": "3.png", 23 "path": "/3", 24 "url": "" 25 }, 26 { 27 "id": 4, 28 "title": "表示テスト_4", 29 "comment": "冬は夙めて", 30 "image": "4.png", 31 "path": "", 32 "url": "http://yahoo.co.jp" 33 } 34]
補足情報(FW/ツールのバージョンなど)
Vue.js ^2.5.2
vue-router ^3.0.1
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。