Vue JSでv-forを使用してコンポーネントの小道具を設定する

Question

私は、propsを渡そうとしているPhoneCard.vueコンポーネントを持っています。

<template> 
    <div class='phone-number-card'> 
     <div class='number-card-header'> 
      <h4 class="number-card-header-text">{{ cardData.phone_number }}</h4> 
      <span class="number-card-subheader"> 
       {{ cardData.username }} 
      </span> 
     </div> 
    </div> 
</template> 

<script> 
export default { 
    props: ['userData'], 
    components: { 
    }, 
    data() { 
     return { 
      cardData: {} 
     } 
    }, 
    methods: { 
     setCardData() { 
      this.cardData = this.userData; 
      console.log(this.cardData); 
     } 
    }, 
    watch: { 
     userData() { 
      this.setCardData(); 
     } 
    } 
} 

コンポーネントはuserDataのプロパティを受け取り、コンポーネントのcardDataプロパティに設定されます。

私は別のVue.jsコンポーネントをページとして使用しています。このページでは、数値とユーザーのリストを取得するためにAPIへのAJAX呼び出しを行っています。

import PhoneCard from './../../global/PhoneCard.vue'; 
export default { 
    components: { 
     'phone-card': PhoneCard 
    }, 
    data() { 
     return { 
      phoneNumbers: [], 
     } 
    }, 
    methods: { 
     fetchActiveNumbers() { 
      console.log('fetch active num'); 
      axios.get('/api').then(res => { 
       this.phoneNumbers = res.data; 

      }).catch(err => { 
       console.log(err.response.data); 
      }) 
     } 
    }, 
    mounted() { 
     this.fetchActiveNumbers(); 
    } 
} 

次に、ajaxコールからの応答データをphoneNumbersプロパティと同じに設定しました。

これで問題が来た後、私はそうのような、のPhoneNumberアレイ内の各番号を反復処理し、カードのコンポーネントに至るまで反復されている現在の数の値をバインドしよう：

<phone-card v-for="number in phoneNumbers" :user-data="number"></phone-card> 

しかし、このリードプロパティーのユーザー名などの開発ツールのエラーは定義されていません。エラーレンダリングコンポーネントは、未定義のプロパティーの分割を読み取ることができません。

私はこれを行うために他の方法を試しましたが、それらはすべて同じエラーを引き起こすようです。 vue-forループの現在の反復オブジェクトにコンポーネントの小道具を適切にバインドする方法に関するアイデア？

Answer 1

export default { 
    props: ['userData'], 
    data() { 
     return { 
      cardData: this.userData 
     } 
    } 
} 

Answer 2

を試してみて、いくつかの工夫の後、自分の質問に答えました。

の代わりに、ウォッチ機能でデータを設定する関数を呼び出すのではなく、私がしなければならなかったのはこれを動作させるためだけでした。

mounted() { 
    this.cardData = this.userData; 
} 

奇妙な、私は前に部品の小道具への変更をリッスンするために、時計の方法を使ってきたし、それが完璧に働いていますが、私はここで起こって別の何かがあると思います。何が違うのか、それがなぜこのように機能するのかについての洞察はすばらしいでしょう！