javascript - vue melaporkan ralat semasa menghantar objek melalui prop

Question

Komponen induk App.vue

Subkomponen sonCp.vue

Struktur data

Ralat dilaporkan tetapi data boleh dipaparkan

Maafkan saya, tolong bantu saya menyemak sama ada cara saya mendapatkan data adalah betul.

Answer 1

Subkomponen pada mulanya mendapat rentetan kosong dan tidak mempunyai atribut seperti .acount.name, jadi ralat berlaku.

Penyelesaian paling mudah:

dalam komponen induk App.vue

<sonCp :dataObj="dataObj" />

Ditukar kepada:

<sonCp :dataObj="dataObj" v-if="dataObj" />

Answer 2

Data yang diminta secara tidak segerak akan dipaparkan dua kali! Kali pertama adalah apabila permintaan tidak selesai Pada masa ini, obj dikembalikan oleh anda''. Kemudian apabila subkomponen mendapat nilai, ralat mesti berlaku! Kali kedua ialah apabila permintaan dikembalikan, dan kemudian terdapat data. Jadi penyelesaiannya jelas, terdapat banyak penyelesaian.

Answer 3

Pada mulanya, dataObj ialah aksara nol, jadi ralat pasti akan dilaporkan apabila diserahkan kepada subkomponen Anda boleh menggunakan v-if untuk menentukan sama ada data telah diperoleh, dan kemudian menjadikannya selepas memperolehnya.

Answer 4

1 Seperti yang dinyatakan di atas, nilai dataObj.length melalui v-if dalam dom untuk memastikan pemaparan apabila terdapat data (disyorkan!!)

.

2. Tetapkan struktur data objek dataObj dalam pilihan data komponen induk terlebih dahulu, seperti:

data() {
    return {
        dataObj: {
            id: '',
            account: {
                name: '',
                age: ''
            }
        }
      
    };
}

Selain itu, adalah disyorkan bahawa poster cuba memilih jenis data yang sesuai dan menetapkan nilai lalai apabila menempah item awal dalam pilihan data Contohnya, dataObj dalam komponen induk harus menyimpan jenis tatasusunan. Cuba dataObj: [], yang juga meningkatkan ungkapan semantik yang jelas.

Answer 5

<son-cp :data-obj="dataObj"></son-cp>