Задать вопрос
KayzerSoze
@KayzerSoze
Адекватен

Как дату из JSON передать в v-for vue.js?

В таблице MySQL есть поле recdate типа DATE.
В строках в этом поле хранится дата в таком формате "yyyy-mm-dd"

Я делаю запрос в таблицу, и полученный массив передаю в v-for для вывода строк в таблице в HTML

Все читается прекрасно, только вот дата не выводится от слова "совсем".

Пример:

<table class="table table-bordered table-striped">
				<thead>
					<th>Date</th>
					<th>Refnum</th>
					<th>Client</th>
					<th>Details</th>
					<th>Amount</th>
					<th>CUR</th>					
				</thead>
				<tbody>
					<tr v-for="tran in trans">
						<td>{{ tran.recdate }} </td>						
						<td>{{ tran.refnum }}</td>
						<td>{{ tran.client }}</td>
						<td>{{ tran.details }}</td>
						<td>{{ tran.amount }}</td>
						<td>{{ tran.cur }}</td>						
					</tr>
				</tbody>
			</table>


В итоге показывается таблица, у которой первый столбец пустой.
Пожалуйста, подскажите, куда что дописать, чтобы дата показалась?
  • Вопрос задан
  • 407 просмотров
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Skillbox
    Frontend-разработчик
    9 месяцев
    Далее
  • Loftschool
    Профессия Веб-разработчик
    7 месяцев
    Далее
  • Skillbox
    Веб-разработчик на PHP
    9 месяцев
    Далее
Решения вопроса 1
@bears
В таблице MySQL есть поле recdate типа DATE.

{{ tran.recdater }}


может тут проблема?
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега Vue.js
В таблице MySQL есть поле recdate типа DATE.

<td>{{ tran.recdater }} </td>

Так как всё-таки поле называется - recdate или recdater? Разберитесь.

UPD. Конечно, вопрос не об этом, но уж больно глаз режет... Почему бы вам не сократить разметку? - добавьте описание столбцов и делайте v-for по нему:

data: () => ({
  columns: [
    { key: 'recdate', label:    'Date' },
    { key:  'refnum', label:  'Refnum' },
    { key:  'client', label:  'Client' },
    { key: 'details', label: 'Details' },
    { key:  'amount', label:  'Amount' },
    { key:     'cur', label:     'CUR' },
  ],
  ...
}),

<thead>
  <tr>
    <th v-for="col in columns">{{ col.label }}</th>
  </tr>
</thead>
<tbody>
  <tr v-for="row in trans">
    <th v-for="col in columns">{{ row[col.key] }}</th>
  </tr>
</tbody>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы