单击时访问用 v-if 显示的对象的索引

Question

我有一个对象，我使用嵌套的 v-if 语句在屏幕上动态显示。此对象显示为 table。我希望每个“单元格”都有一个点击处理程序，returns 该确切“单元格”的索引，以便我可以在点击时分配一个值。

这是我的对象：

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);
}

在当前配置下，这是 chrome 开发工具中的输出，当我单击以 2:

开头的行中的单元格时

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

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

two.runter

如果有帮助，这里是显示的屏幕截图 table:

Answer 1

v-for 对象 returns 对象 key 和 value 'backwards'。这意味着您可能想要反转代码中使用的变量名称：

<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行。

Answer 2

如果我理解正确的话，请尝试像下面的片段：

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>

单击时访问用 v-if 显示的对象的索引

Accessing the index of an object displayed with v-if on click

vue.js

vue-composition-api

vue-sfc