Vue.jsプロパティは未定義ですか？

Question

私は私のメインコンポーネントでこれを使用しました：

<contacts :corporation="corporation"></contacts> 

連絡コンポーネント：

export default { 

    props: { 
     corporation: { 
      default:() => [] 
     } 
    }, 

    data() { 
     return { 
      contacts: [] 
     } 
    }, 

    created() { 
     this.fetchContacts(); 
    }, 

    methods: { 
     fetchContacts() { 
      console.log(this.corporation.slug); // undefined! 
      CorporationService.users(this.corporation.slug) 
       .then(({data}) => { 
        this.contacts = data.contacts; 
       }); 
     } 
    } 
} 

私は連絡コンポーネント内の連絡先を取得しようとしています。問題は、方法fetchContacts();のconsole.log(this.corporation.slug);の場合、corporation.slugは未定義です！

私はvue devtoolsを調べると、法人小道具が適切に設定されています！

何が起こっている可能性がありますか？すでに変更しようとしました：

created() { 
    this.fetchContacts(); 
} 

を

mounted() { 
     this.fetchContacts(); 
    } 

にしかし、それは働いていません。

Answer 1

あなたはwatchを使用することはできますか？

このようなものです。

watch: { 
    'corporation.slug': function(slug) { 
     if(slug){ 
      this.fetchContacts(); 
     } 
    } 
} 

親コンポーネントが変更された場合は、corporation.slug子コンポーネントが自動的に連絡先を取得します。

Answer 2

あなたの小道具のデフォルト値は、値か関数かどうかです。それが関数の場合しかし、それは何かを返すようにしています

props: { 
    corporation: { 
     default() { 
      return [] 
     } 
    } 
},