@krosten92

Как динамически добавлять текстовые поля в форму редактирования строки таблицы с использованием Quasar?

Есть таблица с данными. Каждую строку можно отредактировать в модальном окне. В этом окне часть элементов формы являются обязательными, часть необходимо создавать динамически. Данные полей приходят в момент открытия окна после ajax-запроса. С обязательными полями проблем нет. Они наполняются сразу после ответа сервера. А вот с динамическими всё сложней. Никак не могу сделать их корректный ввод в форму и наполнить данными.

Диалоговое окно:

<q-dialog v-model="formEditItem" persistent>
	<q-card style="width: 1000px; max-width: 80vw;">
		<q-card-section>
			<div class="q-form-wrap">
				<div class="row">
					<div class="q-form-item col-4">
					  <div class="q-form-item__wrap">
						<q-input filled v-model="editedItem.name" label="Наименование"/>
					  </div>
					</div>
					<div class="q-form-item col-4">
						<div class="q-form-item__wrap">
							<q-input filled v-model="editedItem.sku" label="Артикул"/>
						</div>
					</div>
					<div class="q-form-item col-4">
					  <div class="q-form-item__wrap">
						<q-input filled v-model="editedItem.code" label="Код"/>
					  </div>
					</div>
				</div>
			</div>
		</q-card-section>
	</q-card>
</q-dialog>

Ответ сервера (JSON объект):

{
    "name": "Тестовый товар",
    "sku": "1234567890",
    "code": "111111",
    "weight": "0,013",
    "country": "Китай",
}

Проброс полученного объекта в форму:

editItem(item) {
	this.editedItem = Object.assign({}, item)
},

Как видно по коду, текстовые поля с name, sku и code заполняться без проблем. А как динамически добавить в форму под параметры weight и country текстовые поля и заполнить их данными в данной форме?
  • Вопрос задан
  • 124 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Сложить имена основных полей в массив.

Сделать вычисляемое свойство, представляющее имена дополнительных полей - надо получить список ключей editedItem и выкинуть из него имена основных полей.

В диалоговом окне сделать v-for по массиву дополнительных полей.

Всё.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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