在Vue JS中使用v-for設置組件的道具

我有一個PhoneCard.vue組件，我試圖傳遞道具。在Vue JS中使用v-for設置組件的道具

<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(); 
     } 
    } 
}

組件接收用戶數據，然後將其設定爲所述部件的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>

然而這導致到開發工具中的錯誤，比如屬性username是undefined，錯誤渲染組件，不能讀取undefined的屬性分割。

我試過其他方法來做到這一點，但他們似乎都導致相同的錯誤。關於如何正確地將組件的道具綁定到vue-for循環的當前迭代對象的任何想法？

來源

2017-03-18 Daniel Park

嘗試

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

來源

2017-03-18 00:57:59 Bert

該死的，我已經失去了前一天看到你的答案。伯爾尼，你對這種行爲有一些解釋嗎？ – Taras

回答我自己的問題，一些修修補補之後。

而不是調用一個函數來設置監視功能中的數據，我所要做的就是讓它工作。

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

奇怪，我用手錶方法來監聽更改前組件的道具和它完美地工作，但我想有一些不同的事情在這裏。任何有關不同的理解或爲什麼它會像這樣工作會很酷！

來源

2017-03-19 03:14:42

在Vue JS中使用v-for設置組件的道具

回答

相關問題