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"

avatar tuxmania
@tuxmania

17 Kontribusi 1 Poin

Diperbarui 4 tahun yang lalu

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> &lt;li v-for="(person, index) in people"&gt; {{ person.name }} - {{ person.roles.id }} &lt;/li&gt; </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']

avatar hilmanski
@hilmanski

2665 Kontribusi 2131 Poin

Dipost 4 tahun yang lalu

Login untuk ikut Jawaban