Перебрать значения ключей в объектах

Question

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

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

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

<html>

<head>
  <title>Check-success</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>

<body>
  <header>

  </header>

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

  <footer>

  </footer>
</body>

</html>

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

Answer 1

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

custItem: function(item) {
  console.log(item.digit);
},

<td @click="custItem(item)"></td>

БЛОГ НА HUSL

Перебрать значения ключей в объектах

Ответы (1 шт):