親から子へのデータの渡し方がわからないです。
1つのファイル間での渡し方の例はよく見かけるが、単一ファイルコンポーネントの場合はやり方が違う?vuexとか使わないといけないのか?そこらへんよくわからないです。
以下のApp.vueのAPIから取得したデータを子コンポーネントで受取、出力する方法を知りたいです。
関連しそうな箇所に★マークを付けています。
main.js(一部省略)
javascript
1import Vue from 'vue' 2import App from './App' 3import router from './router' 4import Vuetify from 'vuetify' 5import 'vuetify/dist/vuetify.min.css' 6Vue.use(Vuetify) 7Vue.config.productionTip = false 8 9new Vue({ 10 el: '#app', 11 router, 12 components: { App }, 13 template: '<App/>' 14})
App.vue(一部省略)
javascript
1<template> 2<v-app> 3<component-status></component-status> 4</v-app> 5</template> 6 7<style> 8</style> 9 10 11<script> 12import axios from 'axios' 13import Status from './components/status' 14import Vue from 'vue' 15 16export default { 17 data () { 18 return { 19 clipped: false, 20 drawer: true, 21 fixed: false, 22 items: [{ 23 icon: 'dashboard', 24 title: 'dashboard' 25 }, 26 { 27 icon: 'dialpad', 28 title: 'project' 29 }], 30 miniVariant: false, 31 right: true, 32 rightDrawer: false, 33 title: 'costa', 34 search_list: [], 35 status_list: []★ 36 } 37 }, 38 created () { 39 axios.get('http://hoge/api/stub.php') 40 .then(res => { 41 // this.posts = res.data; 42 console.log(res.data) 43 this.search_list = res.data 44 this.status_list = this.search_list.users.status 45 console.log(this.status_list) 46 }) 47 } 48} 49// コンポーネントを登録 50Vue.component('icon', Icon) 51Vue.component('component-status', Status) 52Vue.component('component-card', Card) 53</script>
status.vue(コンポーネントファイル)(一部省略)
javascript
1<template> 2 <div>★ここで親から受け取ったデータを出力したい</div> 3</template> 4<script> 5// import Vue from 'vue' 6import Card from '../components/card' 7import App from '../App' 8import axios from 'axios' 9 10export default { 11 props: ['status_list'],★これで受け取ってもundefineになる 12 data () { 13 return { 14 status_list: [] 15 } 16 } 17} 18</script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/14 11:53