我有一個物件，我使用嵌套的 v-if 陳述句在螢屏上動態顯示該物件。該物件顯示為表格。我希望每個“單元格”都有一個單擊處理程式，該處理程式回傳該確切“單元格”的索引，以便我可以在單擊時分配一個值。
這是我的物件：
const table = {
header: ['Name', 'Runter', 'Frei', 'Hoch', 'Neiba'],
one: { name: '1', runter: '', frei: '', hoch: '', neiba: '' },
two: { name: '2', runter: '', frei: '', hoch: '', neiba: '' },
three: { name: '3', runter: '', frei: '', hoch: '', neiba: '' },
};
這是我的 html 代碼：
<table>
<tr v-for="(key, object) in table" :key="object">
<td v-for="value in key" :key="value" @click="logIt(key)">
{{ value }}
</td>
</tr>
</table>
log只是一個簡單的函式來console.log當前單元格：
function logIt(cell) {
console.log(cell);
}
使用當前配置，當我單擊以 2 開頭的行中的單元格時，這是 chrome 開發工具中的輸出：
{name: '2', runter: '', frei: '', hoch: '', neiba: ''}
我正在嘗試實作這樣的輸出，以便我可以為該變數分配一個值：
two.runter
如果有幫助，這里是顯示表格的螢屏截圖：
uj5u.com熱心網友回復：
v-for在物件上回傳物件key和value'向后'。這意味著您可能希望反轉代碼中使用的變數名稱：
<table>
<tr v-for="(data, key) in table" :key="key">
<!-- key = one; data = { name: '1', runter: '', frei: '', hoch: '', neiba: '' } -->
<td v-for="(value, subkey) in data" :key="subkey" @click="logIt(key)">
<!-- subkey = name; value = '1' -->
{{ value }}
</td>
</tr>
</table>
根據您想要的引數，您可以將多個引數傳遞給logIt- 例如@click=logIt(key, value)
請記住，由于第一個專案的值data- headers- 是一個串列，您將需要采取額外的步驟來以不同的方式處理它，可能作為thead一行。
uj5u.com熱心網友回復：
如果我理解正確，請嘗試以下代碼段：
new Vue({
el: '#demo',
data() {
return {
table: {
header: ['Name', 'Runter', 'Frei', 'Hoch', 'Neiba'],
one: { name: '1', runter: '', frei: '', hoch: '', neiba: '' },
two: { name: '2', runter: '', frei: '', hoch: '', neiba: '' },
three: { name: '3', runter: '', frei: '', hoch: '', neiba: '' },
},
}
},
methods: {
logIt(row, cell) {
if (cell !== 'name') this.table[row][cell] = 'selected ' row ' ' cell
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = falsetd {
border: 1px solid gray;
padding: .5em;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<p>Click on some cell</p>
<table>
<tr v-for="(key, object) in table" :key="object">
<td v-for="(value, i) in key" :key="i" @click="logIt(object, i)">
{{ value }}
</td>
</tr>
</table>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/395495.html
標籤：Vue.js vue-composition-api vue-sfc
上一篇：如何在vuejs中$emit
下一篇：如何僅在承諾完成后執行代碼