How to solve the problem of iterating over keys in objects?

Question

Vue.js

I'll try to break it down for better understanding.

All work happens in Vue.js Inside the data object is 1 parameter object. Inside parameter there are 3 objects (tables) - netProfit, equityСapital, dividends. Inside each of these three objects are three keys - name, all, newValue. The value of the all key is an array with objects, each of which contains two keys - digit and customize. The digit contains data that will need to be displayed in the console. It is necessary to make it so that by clicking on any value in any of the 3 tables, this value is displayed in the console. Code below.

<div id="check-success">
      <div class="main-wrap">
        <div class="make-choice">
          <h2>Выбор показателя</h2>
          <ul v-for="(parameter, index) in parameters">
            <li class="parameter-item">
              <table class="parameter-table">
                <tr class="table-row">
                  <td class="table-cell" @click="custValue(index)" v-for="(item, index) in parameter.all">

                    {{ item.digit }}
                  </td>
                </tr>
              </table>
            </li>
          </ul>
        </div>
      </div>
    </div>

let checkSuccess = new Vue({
  el: '#check-success',
  data: {
    parameters: {
      netProfit: {
        name: 'Чистая прибыль',
        all: [{
          digit: 240,
          customize: false
        }, {
          digit: 2,
          customize: false
        }, {
          digit: 3,
          customize: false
        }],
        newValue: '',
      },
      equityСapital: {
        name: 'Собственный капитал',
        all: [{
          digit: 250,
          customize: false
        }, {
          digit: 300,
          customize: false
        }, {
          digit: 6,
          customize: false
        }],
        newValue: '',
      },
      dividends: {
        name: 'Дивиденды',
        all: [{
          digit: 7,
          customize: false
        }, {
          digit: 130,
          customize: false
        }, {
          digit: 78,
          customize: false
        }],
        newValue: '',
      },
    },
  },
  methods: {
    custValue: function(index) {
      let param = [this.parameters.netProfit, this.parameters.equityСapital, this.parameters.dividends];
      for (let i = 0; i <= param.length; i++) {
        console.log(param[index].all[index].digit);
      }
    },
  },
});

At the moment, when you click on a cell with a value, the custValue(index) function is launched, which should display the value of the cell in the console. But at the moment, the function is not working correctly. Only 1 value is displayed in the first table, the second in the second and the third in the third. Please help.

Answer 1

It would be right to refuse to solve this problem, there is no need for enumeration. Pass the required object to the click handler immediately:

methods: {
  onCellClick(item) {
    console.log(item.digit);
  },

<td @click="onCellClick(item)">