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

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

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

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

Router

Routerは、異なるネットワーク同士を相互に接続するための通信機器。インターネットでのデータを自動的に振り分け、一つのインターネット回線を複数のコンピュータで使用することが可能です。DHCPによりIPアドレスを自動的に割振りすることもできます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

737閲覧

vue.js vou-routerを使ったtemplateの中にjson情報を入れたい

holic

総合スコア134

Vue.js

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

Router

Routerは、異なるネットワーク同士を相互に接続するための通信機器。インターネットでのデータを自動的に振り分け、一つのインターネット回線を複数のコンピュータで使用することが可能です。DHCPによりIPアドレスを自動的に割振りすることもできます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/02/17 06:11

編集2018/02/17 09:06

前提・実現したいこと

使用しているフレームワーク
◎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に詳しい方、ご教示いただければ幸いです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

vue-routerで登録した子のコンポーネントにデータを渡すには次のようにする必要がありそうです。

  1. routerに登録する時に、props: trueのオプションをつけてデータが渡るようにする
  2. router-viewにデータをバインディングする
  3. 渡されたpropsをコンポーネント内で使えるようにする

やってみた成果
https://jsbin.com/rasocagegi/edit?html,js,output
サンプルで他のAPIを叩いて表示させています。また、一部コードを改造しています。

1

{ path: '/', component: Home, meta: { title: 'Home', desc: 'Homeの説明' }, props: true // ←コレが大事 },

https://router.vuejs.org/ja/essentials/passing-props.html

2

<router-view :posts="posts"></router-view>

3

var Home = { template: ` <div class="page page--home"> <h2>ここはホームです、一覧表示させます<h2> <ul v-for="post in this.posts"> <li> <a v-bind:href="post.link" target="_blank"> {{post.title}}<br> </a> </li> </ul> </div> `, props: ["posts"] }

2、3については通常のVueの流れですが、1と組み合わせた時の例は公式にも細かく載ってませんね。
スタックオーバーフローで見つけてなんとかなりましたが。
https://stackoverflow.com/questions/37937262/passing-props-to-vue-js-components-instantiated-by-vue-router

投稿2018/02/17 17:59

sakapun

総合スコア888

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

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

holic

2018/02/17 19:31

半日私も悩みました。解答を導き出していただきましてありがとうございます。 propsまだまだ知らないことだらけでした。「 sakapun様 いつもありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問