0

我有一个对象，我使用嵌套的 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 它只是一个简单的函数来控制台记录当前单元格：

function logIt(cell) {
  console.log(cell);
}

使用当前配置，当我单击以 2 开头的行中的单元格时，这是 chrome 开发工具中的输出：

{name: '2', runter: '', frei: '', hoch: '', neiba: ''}

我正在尝试实现这样的输出，以便可以为该变量赋值：

two.runter

如果有帮助，这里是显示表格的屏幕截图：

在此处输入图像描述

4

2 回答 2

2

v-foron objects 返回对象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一行。

于 2021-12-26T20:53:39.180 回答
0

如果我理解正确，请尝试以下代码段：

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 = false
td {
  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>

于 2021-12-26T21:01:39.327 回答