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

I have an object that i am displaying dynamically on the screen with nested v-if statements. This object is displayed as a table. I want each "cell" to have a click handler that returns the indices of that exact "cell" so that i can assign a value on click.

This is my object:

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: '' },
};

This is my html code:

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

logIt is just a simple function to console.log the current cell:

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

With the current configuration this is the output in chrome dev tools when i click on a cell in the row starting with 2:

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

I am trying to achieve a output like this so i can assign a value to that variable:

two.runter

If it helps here is a screenshot of the displayed table:

CodePudding user response：

v-for on objects returns the object key and value 'backwards'. This means that you probably want to reverse the variable names used in your code:

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

Depending on which parameters you want, you can pass multiple parameters to logIt - e.g. @click=logIt(key, value)

Bear in mind that since the value of the first item in data - headers - is a list, you will need to take extra steps to handle this differently, probably as a thead row.

CodePudding user response：

if I understood you correctly try like following snippet:

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>