title: Setting props for components using v-for in Vue JS
body: <p>I have a PhoneCard.vue component that I'm trying to pass props to.</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class='phone-number-card'&gt;
          &lt;div class='number-card-header'&gt;
              &lt;h4 class="number-card-header-text"&gt;{{ cardData.phone_number }}&lt;/h4&gt;
              &lt;span class="number-card-subheader"&gt;
                  {{ cardData.username }}
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      props: ['userData'],
      components: {
      },
      data() {
          return {
              cardData: {}
          }
      },
      methods: {
          setCardData() {
              this.cardData = this.userData;
              console.log(this.cardData);
          }
      },
      watch: {
          userData() {
              this.setCardData();
          }
      }
  }
  </code></pre>
  
  <p>The component receives a property of userData, which is then being set to the cardData property of the component.</p>
  
  <p>I have another Vue.js component that I'm using as a page. On this page I'm making an AJAX call to an api to get a list of numbers and users.</p>
  
  <pre><code>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 =&gt; {
                  this.phoneNumbers = res.data;
  
              }).catch(err =&gt; {
                  console.log(err.response.data);
              })
          }
      },
      mounted() {
          this.fetchActiveNumbers();
      }
  }
  </code></pre>
  
  <p>Then once I've set the response data from the ajax call equal to the phoneNumbers property.</p>
  
  <p>After this comes the issue, I try to iterate through each number in the phoneNumber array and bind the value for the current number being iterated through to the Card's component, like so:</p>
  
  <pre><code>&lt;phone-card v-for="number in phoneNumbers" :user-data="number"&gt;&lt;/phone-card&gt;
  </code></pre>
  
  <p>However this leads to errors in dev tools such as property username is undefined, error rendering component, cannot read property split of undefined.</p>
  
  <p>I've tried other ways to do this but they all seem to cause the same error. any ideas on how to properly bind props of a component to the current iteration object of a vue-for loop?</p>