綁定多維數組與vuejs

-1

我在我的前端建立一個動態表，並在最後我需要知道什麼插入我的表的每個單元格，因爲它是可編輯的，所以我對我的HTML：綁定多維數組與vuejs

<table class="table table-responsive"> 
    <tbody> 
     <tr v-for="(row,idx1) in tableRows" :class="{headerRowDefault: checkHeader(idx1)}"> 
     <td class="table-success" v-for="(col,idx2) in tableCols"><input v-model="items[idx1][idx2]" type="text" class="borderTbl" value="HEY"/></td> 
     </tr> 
    </tbody> 
    </table>

正如你們可以看到的那樣。我在輸入內部設置了一個帶有項[idx1] [idx2]的v模型，所以我可以將該值傳遞給該行和列，它不是這樣工作的，我不知道如何設置它。

這是我的javascript：

export default { 
    name: 'app', 
    data() { 
    return { 
     table: { 
     rows: 1, 
     cols: 1, 
     key: 'Table', 
     tableStyle: 1, 
     caption: '', 
     colx: [] 
     }, 
     hasHeader: true, 
     hasCaption: true, 
     insert: 1, 
     idx2: 1, 
     items: [] 
    } 
    },

計算：{

tableStyles() { 
    return this.$store.getters.getTableStyles 
}, 
tableRows() { 
    return parseInt(this.table.rows) 
}, 
tableCols() { 
    return parseInt(this.table.cols) 
}

預計項目數組：

items:[ 
    ["john","Micheal"] 
    ["john","Micheal"] 
    ["john","Micheal"] 
    ["john","Micheal"] 
]

來源

2017-08-31 Filipe Costa

您需要提供HTML模板爲我們理解這個問題 –

呵呵我曾經有過，奇怪的是沒有放置它 –

你在哪裏得到tableCols或tableRows？ –

所以，我覺得你不指着你的模型正確。

模板：

<tr v-for="(row, idx1) in items"> 
    <td class="table-success" v-for="(col, idx2) in row"> 
     <input v-model="items[idx1][idx2]" type="text" /> 
    </td> 
</tr>

腳本：

data() { 
    return { 
    items:[ 
    ["john","Micheal"], 
    ["john","Micheal"], 
    ["john","Micheal"], 
    ["john","Micheal"] 
    ]; 
    }; 
}

下面是它的一個working fiddle

來源

2017-08-31 09:28:47

你改變了什麼？ –

我剛剛在'tr'和'td'中改變了'v-for'。你應該看着項目，並相應地循環。現在你已經爲你的問題添加了更多的東西，我認爲在這種情況下不需要計算屬性。請讓我知道如果我的回答是正確的，或者如果你需要不同的東西 –

我得到一個vue.esm.js：566 TypeError：無法讀取未定義的屬性'0' –

綁定多維數組與vuejs

回答

相關問題