Как решить проблему перебора ключей в объектах?

Question

[Sol-Mayers]

Постараюсь разложить по полочкам для лучшего понимания.

Вся работа происходит в Vue.js Внутри объекта data лежит 1 объект parameter. Внутри parameter лежат 3 объекта (таблицы) - netProfit, equityСapital, dividends. Внутри каждого из этих трёх объектов лежат три ключа - name, all, newValue. Значением ключа all является массив с объектами, внутри каждого из которых лежат два ключа - digit и customize. В digit записываются данные, которые необходимо будет отображать в консоли. Необходимо сделать так, что-бы кликнув на любое значение в любой из 3 таблиц, в консоль выводилось это значение. Код ниже.

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

В данный момент, когда кликаешь по ячейке со значением, запускается функция custValue(index), которая и должна отображать в консоль значение ячейки. Но в данный момент, функция работает не правильно. Отображаются только 1 значение в первой таблице, второе во второй и третье в третьей. Прошу помощи.

Answer 1

[0xD34F]

Правильно будет отказаться от решения указанной проблемы, необходимости в переборе нет. Передавайте в обработчик клика сразу нужный объект:

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

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

Comments

[Sol-Mayers]

Спасибо, друг! Я начал как обычно выдумывать какие-то громоздские циклы и т.п. А решение оказалось в одну маленькую строчку. Не дошло использовать в качестве аргумента само значение, а не его индекс)