Vueの子コンポーネントで警告:[Vue warn]: The “data” option should be a function that returns a per-instance value in component definitions.が表示されたとき

子コンポーネントでdataオプションを(うっかり)定義したところ、

[Vue warn]: The “data” option should be a function that returns a per-instance value in component definitions.

で怒られました。

Vueのdataプロパティやelプロパティは、全インスタンス間でまたいで同じものが使用されるとことなので、子コンポーネント側のdataプロパティはオブジェクトとしてでなく関数として定義する必要があります。


Vue.component('child-component', { template:"<some>code</some>", data: function() { return { language: ['English', 'Japaese'] } } })

のように定義してあげればOKです。

参考

この記事を書いた人

yoshikiito

都内でテストエンジニア&ブロガーをやっている@yoshikiitoです。

ソフトウェアエンジニアの学習方法や成長するための考え方、会社に依存せず自分の力で生きていけるエンジニアになる方法などについて興味があります。
こういった方法や考え方、自分が試したことなどをブログを通じて発信します。

仕事は主にソフトウェアテストやテスト自動化。
趣味は浦和レッズと読書と技術書を買って積むこと。

技術評論社から本を出すのが夢

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします