Saya mencoba v-untuk array dengan Item bersarang:

Ini adalah array utama:

export default {
  data () {
    return {
      arr: [{
        mainId: 8,
        subItems: [{
          subId: 1,
          subSubItems: {
            subSubId: 1,
            name: 'Name1'
          }
        }]
      }, {
        mainId: 5,
        subItems: [{
          subId: 2,
          subSubItems: {
            subSubId: 3,
            name: 'Name2'
          }
        },
        {
          subId: 3,
          subSubItems: {
            subSubId: 4,
            name: 'Name3'
          }
        }]
      }]
    }
  }
 }

Saya sudah mencoba mengulang array ini seperti ini:

<v-card v-for="subItem in arr" :key="subItem.mainId">
                {{subItem.mainId}}
  <p v-for="subSubItem in subItem.subSubId" :key="subSubItem.subSubId"></p>
                {{subSubItem.name}}
</v-card>

Tapi sayangnya saya tidak mendapatkan output apa pun: Kesalahan Konsol: "Tidak dapat membaca properti 'subSubId' dari undefined"

Kesalahan apa yang saya buat di sini?

0
Chris 30 Januari 2020, 08:49

2 jawaban

Jawaban Terbaik

Coba ini:

new Vue({
    el:"#app",
    data: { 
        arr: [
        {
            mainId: 8,
            subItems: [
            {
                subId: 1,
                property: {
                    subSubId: 1,
                    name: 'Name1'
                }
            }]
        },
        {
            mainId: 5,
            subItems: [{
                subId: 2,
                    property: {
                        subSubId: 3,
                        name: 'Name2'
                    }
                },
                {
                    subId: 3,
                    property: {
                        subSubId: 4,
                        name: 'Name3'
                    }
                }
            ]
        }]    
    }
});
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="item in arr" :key="item.mainId">
            MainId : {{item.mainId}}
            <p v-for="subitem in item.subItems" :key="subitem.subId">
                SubItem Name : {{subitem.property.name}}
                <hr/>
            </p>
        </div>
    </div>
</body>
</html>
1
Hardik Raval 30 Januari 2020, 06:41

Kode Anda benar tetapi dengan beberapa kesalahan ketik:

<v-card v-for="subItem in arr" :key="subItem.mainId">
  {{subItem.mainId}}
  <p v-for="subSubItem in subItem.subItems" :key="subSubItem.subId">
    {{subSubItem.subSubItems.name}}
  </p>
</v-card>

Karena subItem.subSubId tidak ada acara, itu harus subItem.subItems dan Anda menyetel {{subSubItem.name}} (yang juga tidak ada) di luar tag <p>. Jadi, saya telah mengubah kode Anda. Semoga membantu.

0
Nipun Jain 30 Januari 2020, 06:41