मैं अपने Vue घटक के भीतर एक रिश्ते (कई से कई का उपयोग करके) के साथ डेटा प्रदर्शित करने का प्रयास कर रहा हूं।

मैं बाकी एपीआई से ऑब्जेक्ट में उपयोगकर्ताओं को स्टोर करता हूं:

users: {}, 
//...
axios.get("api/user").then(({data}) => (this.users = data));

JSON का एक उदाहरण api/user से लौटा:

{"current_page":1,"data":[{"id":2,"name":"Andrew","description":"Testing","role":[{"id":2,"role_title":"TestTitle","pivot":{"user_id":2,"role_id":2}} 

डेटा प्रदर्शित करते समय मैं कर सकता हूँ

<tr v-for="user in users.data" :key="user.id">
<td>{{user.name}}</td> // DOES work, displays 'Andrew'

हालांकि अगर मैं ऐसा करने की कोशिश करता हूं:

<td>{{user.role.role_title}}</td> //does NOT work, should display 'TestTitle'

यह कुछ भी नहीं दिखाता है, मैं क्या गलत कर रहा हूँ?

1
Courtney White 4 मई 2019, 06:07

1 उत्तर

सबसे बढ़िया उत्तर

user.role भूमिकाओं की एक सरणी है। पहली भूमिका प्रदर्शित करने के लिए (यह मानते हुए कि हमेशा कम से कम एक भूमिका होगी) आप यह कर सकते हैं:

<td>{{ user.role[0].role_title }}</td>
6
Decade Moon 4 मई 2019, 03:11