Vue.js соответствует значению данных в таблице на основе значения строки или идентификатора html

Question

Я построил таблицу с месяцами и годами в виде столбцов, это исправлено и не может быть изменено.

Моя таблица в настоящее время создается так:

<table>
    <tbody class="table">
        <tr>
            <td id="03-2019">03-2019</td>
            <td id="02-2019">02-2019</td>
            <td id="01-2019">01-2019</td>
            <td id="12-2018">12-2018</td>
            <td id="04-2017">04-2017</td>
        </tr>
        <tr id = "dynamicData">
            <td>10</td>
            <td>227</td>
            <td>342</td>
        </tr>
    </tbody>
</table>

Строка таблицы с id "dynamicData" создается моделью v-for.

У меня есть набор данных, в котором ключом является месяц-год, а значением - результат.

Так это выглядит так:

var dataSet = {
  "12-2018 : "10",
  "03-2019" : "227",
  "04-2017": "342"
};

Я сгенерировал свое значение, как показано ниже, с помощью dataSet:

tr.dynamicData
    td(v-for="data in dataSet") {{data}}

Но это НЕ то, что я хочу.Я хочу, чтобы данные соответствовали дате в верхней строке.Например, в столбце 03-2019 значение данных должно быть 227, в столбце 02-2019 значение должно быть пустым, поскольку в моем dataSet нет значения для даты 02-2019.

Как мне добиться этого с помощью vue?Я пытался создать функцию, но, похоже, v-for преобразовал мою карту в массив.

Answer 1

Сначала необходимо получить даты из первой строки таким образом, чтобы это имело смысл для вашего приложения (я не знаю, отображаются ли эти данные BE, если они жестко закодированы или откуда они получены).

let dates = ['03-2019','02-2019','01-2019','12-2018','04-2017'];

Эти даты будут использоваться в качестве ключей для поиска соответствующих значений.

Теперь итерируйте эти даты и соберите их соответствующие значения в наборе данных:

let dynamicData = dates.map( date => this.dataSet[date] )
  return dynamicDates;
}

Наконец, в вашем v-for сделайте то же самое, что и вы, но используйте новую переменную dynamicDataвместо этого

tr.dynamicData
  td(v-for="data in dataSet") {{data}}

Вот ручка Я сделал это для проверки.

В зависимости от того, как вы можете получить данные первой строки, вы можете использовать dynaicData в качестве вычисляемой переменной.Это будет то же самое, за исключением того, что код будет немного чище.

Удачи