初めてVue.jsを使い、SPAを構築しております。
以下の点で躓いています。
【やりたいこと】
① App.vueで非同期でjsonを取得。
↓
② 子コンポーネントのNavにjsonを渡す
↓
③ Navからvue-routerのリンク先にjsonを渡す
ということを行いたいのですが、③がうまく行きません
以下のようなコードを書いています。
vue-routerのリンク先にデータを渡す方法を教えて下さい。
また①から②のデータの受け渡しについても間違いがあればご指摘いただけると幸いです。
App.vue
Javascript
1<template> 2 <div id="app"> 3 <Nav :jsondata="jsondata" /> 4 <router-view/> 5 </div> 6</template> 7<script> 8import Nav from './components/Nav'; 9 10export default { 11 name: 'app', 12 components : { 13 Nav 14 }, 15 data(){ 16 return{ 17 jsondata: "" 18 } 19 }, 20 beforeCreate() { 21 this.$axios 22 .get("http://localhost/test.json") 23 .then(response => { 24 var responsedata = response.data 25 this.jsondata = responsedata 26 }) 27 .catch(err => { 28 (this.errored = true), (this.error = err); 29 }) 30 .finally(() => (this.loading = false)); 31 }, 32} 33</script>
Nav.vue
javascript
1<ul> 2 <li> 3 <router-link to="/">Home</router-link> 4 </li> 5 <li> 6 <router-link to="/about">Home</router-link> 7 </li> 8 <li> 9 <router-link to="/blog">Home</router-link> 10 </li> 11</ul> 12<script> 13export default { 14 data(){ 15 return { 16 isActive: false, 17 } 18 }, 19 props:["jsondata"], 20 mounted(){ 21 console.log(this.jsondata) 22 }, 23 watch: { 24 jsondata:function(one,two){ 25 console.log(JSON.parse(JSON.stringify(one))) 26 console.log(two) 27 } 28 } 29} 30</script>
route.js
Javascript
1import Top from './components/top/Top.vue'; 2import Blog from './components/blog/Top.vue'; 3import About from './components/aboutus/Top.vue'; 4 5const routes = [ 6 { 7 path: '/', 8 component: Top 9 }, 10 { 11 path: '/about', 12 component: About, 13 props: true 14 }, 15 { 16 path: '/blog', 17 component: Blog 18 }, 19];
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。