我正在使用Vue 3制作一個動態表，作為一個學習專案，其中用戶可以從表中添加或洗掉行，以及其他事項。我正在使用一個table-row組件來創建行，以及一個table-data組件來創建該行中的資料單元。
const app = Vue.createApp({
data() {
回傳 {
tableRows: [],
}
},
方法: {
addRow() {
this.tableRows.push(-1);
},
},
})
我需要做的是將陣列TableRows和index傳遞給table-row組件，以便執行一個洗掉行的操作，如以下代碼所示：
問題是，app.component('table-row', {fnFangSong_GB2312bord1shad1pos(200,288)}
app.component('table-row', {
props: {
tableRows: Array,
索引。數值。
},
方法：{
deleteRow(index) {
this.tableRows.splice(index, 1);
}
},
模板: `
<tr>
<table-data></table-data>
<table-data></table-data>
<table-data></table-data>
<table-data></table-data>
<button @click="deleteRow">洗掉行</button>。
</tr>
`
})
TableRows和index的值都是未定義的（正如在Vue DevTools中看到的），這意味著道具沒有從父組件傳遞到子組件。我想這就是為什么每當我點擊洗掉行按鈕時就會彈出這個錯誤的原因：
未發現的型別錯誤。不能讀取未定義的屬性（讀取'splice'）
這里是 Vue DevTools 的截圖。你可以看到道具變數有未定義的值：
我真的不確定為什么會發生這種情況，或者我可以做些什么來補救。如果有任何幫助，我將不勝感激。
uj5u.com熱心網友回復：
我認為所有的道具必須首先在父類的資料中宣告，然后才能在子類中作為道具被系結
。"PARENT"
<模板>
...
<Child :tableRows="tableRows" />
...
</template>
...
<腳本>
...
data() {
回傳 {
tableRows: []
}
}
...
</script>
"CHILD"
...
</script>
...
props: {
tableRows: 陣列
}
...
</script>
至于索引，你很可能必須在點擊時將事件emit回升到父級。
"CHILD"
<模板>
...
<button @click="$emit('deleteRow')">洗掉行</button>。
...
</template>
在這里，你必須在父類中處理它，其中e是與事件相關的值--在這種情況下，估計是你想要的索引。
"PARENT"
<模板>
...
<Child @deleteRow="deleteRow（e）" :tableRows="tableRows" />
...
</template>
uj5u.com熱心網友回復：
你沒有在@click="deleteRow"中傳遞index。
試著將方法改為：
deleteRow() {
this.tableRows.splice(this.index, 1);
}
或者將index傳給方法：
@click="deleteRow(index)"
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/327585.html
標籤：