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

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

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

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

Q&A

解決済

1回答

8283閲覧

Vue.js 2 propsの配列データをscriptで参照したい

SystemRyota

総合スコア24

Vue.js

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

1グッド

0クリップ

投稿2018/01/27 15:25

編集2018/01/27 19:45

親から子に渡した配列データをscript内でアクセスしたいのですが、上手くいきません。
文字列や数値だと参照できるのですが、何故か配列だと駄目なようです。
propsをVue開発ツールで見ると、データは渡せており、template内で参照は出来ることを確認しました。

JavaScript

1// 親 2<template> 3 <example :arr="parent.arr" /> 4</template> 5 6<script> 7 data() { 8 return { 9 parent: { 10 arr: [/* ... */] 11 } 12 } 13 }, 14 mounted() { 15 this.getArr() 16 }, 17 methods: { 18 getArr() { 19 axios.get(url, { 20 params: {/* ... */} 21 }) 22 .then(res => { 23 if (res.data) { 24 this.parent.arr = res.data 25 } 26 }) 27 } 28 } 29</script>

JavaScript

1// 子 2// <template>...</template> 3 4<script> 5export default { 6 props: { 7 arr: Array 8 }, 9 mounted() { 10 console.log(this.arr) // [__ob__: Observer] (データは存在しない) 11 console.log(this.$props.arr) // undefined 12 console.log(this.$parent.parent.arr) // undefined 13 } 14} 15</script> 16
hogehogehogemon👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

自分でも作ってみたところ、想定通り特に問題ありませんでした。。
https://codesandbox.io/s/5yzx45jp94

これまでの経験からすると、親の配列のデータは最初から固定なものでしょうか?
何かによって配列の操作をしている場合、配列の変化はちゃんと感知してくれない場合があります。
その場合、表示はされているけど、Scriptでの操作はおかしくなります。
こういった操作をしてはいないでしょうか?
公式ドキュメント

投稿2018/01/27 19:27

sakapun

総合スコア888

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

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

SystemRyota

2018/01/27 19:32

ご回答ありがとうございます。 先程、とりあえず解消したのですが、以下が要因のようでした。。 親コンポーネントにて mounted 時にaxiosにてデータを取得していた兼ね合いで取得出来なかったみたいです。 現在は子コンポーネントにwatchを追加して、以下のコードにしています。 watch: { arr(val) { console.log(this.arr) } } こういったケースでウォッチャーを使用するのは良くない気がしています。 ベスト(一般的)な対応策はどのようなコードになるのでしょうか。
sakapun

2018/01/28 05:59

axiosでデータを取得して、配列に追加している時のコードはどのようなものですか? this.arr += newArr; とかは回答で提示したように、変化なしと捉えられる可能性があります。 this.arr.push(...newArr); であれば問題なかったりします。 その辺の見直しをするべきなので、コレ以上のサポートにはコードの例示をお願いします
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問