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

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

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

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

JavaScript

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

Q&A

解決済

1回答

269閲覧

親から渡した子に渡したpropsを、setupメソッド内で確認できない

masahase

総合スコア26

Vue.js

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

JavaScript

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

0グッド

1クリップ

投稿2023/02/21 09:30

編集2023/02/22 00:53

実現したいこと

  • 親でAPIリクエストを実行しそのレスポンスデータをpropsとして、子コンポーネント側のsetupメソッド内でconsole.logを実行して中身を確認したい
  • 最終目的はpropsのデータを子コンポーネントで使用する事

前提・状況

  • Vue3(Compotition API使用,script setupタグ不使用)
  • javascript
  • 画面読み込み時に親コンポーネントでAPIリクエストを行い、そのレスポンスを子に渡す
  • 親から渡ったpropsを子コンポーネントのtemplateに記述し、表示はできている

発生している問題

子コンポーネントのsetupメソッド内でconsole.log(props)を実行するとコンソールに下記が表示される。

Proxy { プロパティ名:null}

ただし、このproxyの中を見ると、Target配下に欲しい情報が存在しているので取得できてる様には見えます。

ソース

子のコンポーネント

ChildComponet.vue

1<template> 2 <div>{{ data }}</div> 3 </template> 4 5 <script> 6 export default{ 7 props:{ 8 data:{ 9 type: Object, 10 required: true 11 }, 12 setup(props){ 13 console.log(props); 14 } 15 } 16 } 17 </script>

親のコンポーネント

ParentComponent.vue

1<template> 2 <div> 3 <ChildComponet component :data="response" /> 4 </div> 5</template> 6 7<script> 8import axios from 'axios'; 9import { reactive, onMounted} from 'vue'; 10import ChildComponet from '/../src' 11 12export default { 13 name:'Parent', 14 props:{}, 15 components:{ 16 ChildComponet 17 }, 18 setup(){ 19 const response = reactive({ 20 data: null 21 }) 22 23 const fetchAPI = () => { 24 axios.get('/data.json').then((res) => { 25 response.data = res.data; 26 }).catch((error) => { 27 console.log(error); 28 }) 29 } 30 31 onMounted(()=> { 32 fetchAPI(); 33 }) 34 return{ 35 response 36 } 37 } 38} 39</script> 40

補足情報(FW/ツールのバージョンなど)

親のコンポーネントに記載されているAPIリクエストについてですが、APIがまだ作成されておらずaxiosのgetメソッドでjsonファイルを読み込んでいます。

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

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

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

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

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

yuma.inaura

2023/02/21 10:55

親のコードも載せませんか?
masahase

2023/02/21 11:46

失礼しました。親コードを追加しました
yuma.inaura

2023/02/21 11:54

prospはtypoでしょうか?
masahase

2023/02/21 12:12 編集

回答ありがとうございます。typoです。もとのコードはpropsになっています。修正しました。
guest

回答1

0

自己解決

解決しました。子コンポーネントが表示された後に取得していたので、v-ifでデータ取得後に切り替わる様にしました

投稿2023/02/21 15:53

masahase

総合スコア26

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問