Vue.jsは、初期値propを使用してv-model入力をバインドします。

Question

v-modelで区切られた選択入力に初期値を渡そうとしています。私はこれが動作しない理由を把握することはできません。

props: ['team'], 
data() { 
    form: { 
     data: { 
      country: this.team.country 
     } 
    } 
} 

form.data.countryがundefinedです。しかし、小道具のデータは実際に渡されます。私はVue Devtoolsのようにのようにアクセスすることができ、私は小道具から他のデータを印刷することができます。ただし、data()に登録されていません。

また、mounted()を使用してデバッグしようとすると、プロパティーteamは定義されません。

mounted() { 
    console.log(this.team); 
} 

しかし、私は先に述べたように、それは、テンプレートがレンダリングされるときに定義されており、このように使用することができます。

私が渡しているプロパティがなぜdata()に認識されないのですか？

Answer 1

親データによって小文字データがロードされました。これは@Bertによるコメントで提案されました

Answer 2

非同期ロードは問題ではありません。上記のチームがハードコーディングされていても、コンポーネントにデータが作成されるときはit's still undefinedとなります。 （コンポーネントは、小道を通過するルートVueの前に作成する必要があります）

おそらく誰かが私を修正しますあなたのデータの小道具を参照するために決して良い理由はありません。何かが、それは小道具だまたは（それが望んでいるものを見つけるために、現在のコンポーネントが知っている）は、どちらかのデータは、（コンポーネントは、それが情報を提供するコンテキストのようになる）です。

あなたが発見したように、あなたのデータは一度作成されます。 Vueはすべての変更を監視しますが、ルート値の変更に対して脆弱です。データが作成されたときに値として参照されるものが変更された場合、反応パイプは破損しています。これに対する答えはstore patternです。たとえ内容が変わっても、置き換えられないグローバルスコープの変数を監視します。

code