前提・実現したいこと
使用しているフレームワーク
◎vue.js(2.5.x)
モジュール
◎vue-router
◎axios
vue.jsを使って、ブログ記事をwp rest apiのjsonから呼び出して、
表示させたいと考えております。
完成のURLは
●ホーム(記事一覧を表示)
/
●記事詳細ページ(記事詳細を表示)
/記事ID
ソースを記します。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja-JP"> 3<head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 8 <!-- page information --> 9 <title>vue router</title> 10 <meta name="description" content=""> 11 <meta name="keywords" content=","> 12 <link rel="stylesheet" href="/blog/css/style.css"> 13<script src="https://unpkg.com/vue/dist/vue.js"></script> 14<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 15<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 16 17</head> 18 19<body> 20<div id="wrapper"> 21 <header id="header"> 22 <h1><router-link to="/"><img src="img/logo.png" alt=""></router-link></h1> 23 <nav class="gNavi"> 24 <ul> 25 <li><router-link to="/">ホーム</router-link></li> 26 </ul> 27 <ul v-for="post in posts"> 28 <li> 29 <a v-bind:href="post.link" target="_blank"> 30 {{post.title.rendered}}<br> 31 </a> 32 </li> 33 </ul> 34 </nav> 35 </header><!--//header --> 36 <div class="contents"> 37 <transition name="fade"> 38 <router-view></router-view> 39 </transition> 40 </div><!--//contents --> 41 42</div><!--//wrapper --> 43 44<script src="/blog/js/router_config.js"></script> 45</body> 46</html>
cssは割愛します
js
1//テンプレートの設定 2var SingleBlog = { template: ` 3 <div class="page page--message"><p>SingleBlogのテンプレートです</p> 4 </div>` } 5 6var Home = { template: ` 7 <div class="page page--home"> 8 <h2>ここはホームです、一覧表示させます<h2> 9 <ul v-for="post in this.posts"> 10 <li> 11 <a v-bind:href="post.link" target="_blank"> 12 {{post.title.rendered}}<br> 13 </a> 14 </li> 15 </ul> 16 </div> 17 ` } 18 19//ルーティングの設定 20var routes = [ 21 { 22 path: '/', 23 component: Home, 24 meta: { 25 title: 'Home', 26 desc: 'Homeの説明' 27 } 28 }, 29 { 30 path: '/:id', 31 component: SingleBlog, 32 meta: { 33 title: 'Message', 34 desc: 'Messageの説明' 35 } 36 } 37] 38 39var router = new VueRouter({ 40 //mode: 'history', 41 routes: routes, 42 scrollBehavior (to, from, savedPosition) { 43 return { x: 0, y: 0 } 44 } 45}); 46 47//titleとdescriptionを変更 48router.beforeEach((to, from, next) => { 49 document.title = to.meta.title; 50 document.getElementsByTagName("meta")["description"].setAttribute('content',to.meta.desc); 51 52 next(); 53}); 54 55var app = new Vue({ 56 router, 57 el:'#wrapper', 58 data: { 59 posts: [] 60 }, 61 created: function(){ 62 this.getPosts(); 63 }, 64 methods: { 65 getPosts: function(){ 66 axios.get( 'http://026.test55.net/wp/wp-json/wp/v2/member/?_embed' ) 67 .then( response => { 68 this.posts = response.data; 69 } ) 70 .catch( error => { 71 window.alert( error ); 72 } ); 73 } 74 } 75})
実現したいことは
axiosを使ってpostsにjsonデータをセットして、その値を
templete設定をした下記の記述に読み込ませたいと考えていたのですが、表示されず、頭を悩ませています。
js
1 <ul v-for="post in posts"> 2 <li> 3 <a v-bind:href="post.link" target="_blank"> 4 {{post.title.rendered}}<br> 5 </a> 6 </li> 7 </ul>
ちなみに上の記述はhtmlにも記述をしています。それは正常に表示されますので、json取得は成功していると思われます。
templeteの中だと正しく動いてくれない。
vue.jsに詳しい方、ご教示いただければ幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/17 19:31