Postingan lainnya
V-for vue js laravel
mohon maaf para master saya baru belajar vue js untuk data looping dengan menggunakan v-for gimana ya karena saya coba dari kemarin kok belum bisa
data(){
return{
users:[],
}
},
methods:{
getUser(){
axios.get('/admin/userRole')
.then(res => {
this.users = res.data
console.log(res.data)
})
.catch(err => {
console.log(err)
})
}
},
mounted() {
this.getUser()
}
hasil dari vue js nya begini
<a href='https://ibb.co/ccPV7Wm'>untuk hasil dari vue js</a>
jika di htmlnya adalah
<tr v-for="(user, index) in users" :key="user.id">
<td>{{ index+1 }}</td>
<td>{{ user.name }}</td>
<td>{{ user.roles }}</td> //disni jika di tambah dengan {{ user.roles.id }} maka error
</tr>
karena hasil yang di terima malah error
di console log Error in render: "TypeError: Cannot read property 'id' of null"
Tanggapan
kalau pakai array bisa kah? user.roles['id'] btw sekarang kalo user.roles doang outputnya gimana
cara yang berhasil yang mana mas?
1 Jawaban:
Jawaban Terpilih
saya coba dengan struktur seperti ini <pre> new Vue({ el: '#app', data: { people: { 1: { name: 'Hilman', roles: { id: 1, name: "admin" } }, 2: { name: 'tuxmania', roles: { id: 2, name: "user" } }, } } }); </pre>
bisa diambil dengan ini
<pre> <li v-for="(person, index) in people"> {{ person.name }} - {{ person.roles.id }} </li> </pre>
<a href='https://codepen.io/hilmanspace/pen/vYBpZRg?editors=1010'>cek codepen </a>
Saya ngga tahu struktur kamu, tapi coba loop lagi kalau dia object, jadi di loop lagi bagian rolesnya, atau coba pakai array person.roles['id']
