Как передать значение input не используя v-model?

Question

[igor_solweb]

Добрый день!

Стоит простенькая задача, не могу додуматься как ее правильно реализовать:


имеется подгружаемые из Json параметры (на рисунке), с подгрузкой проблем нет, а вот как правильно сохранить пока не придумал, есть кнопка Save по нажатию которой нужно обратно все параметры с inputОВ передать в JSOn, то есть если там что-то изменилось в любом input, то нужно сохранить это значение при нажатии кнопке Save. v-model здесь не подойдет, т.к. inputОВ может быть хоть 100 и больше.

Думал над таким вариантом, что при нажатии на кнопку Save просто через for цикл пробегаться по массиву из которого берутся данные, но вот как конкретное значение конкретного input записать обратно в массив?

Натолкните на мысль верную пожалуйста )

Comments

[WapSter]

И почему v-model не подойдет. Не обязательно же отдельные свойства создавать, это может быть один объект или массив.

[igor_solweb]

WapSter, так он будет общий у всех inputОВ

[alexalexes]

v-model может быть привязана и к свойству элемента списка/коллекции, не важно, динамически создан список или нет.

<div  class="row" v-for="(row, index) in data.rows">
... <input v-model="row.value"/> ...
</div>

В json можно перегонять туда-сюда условный data.rows, который живет внутри экземпляра vue.

[igor_solweb]

alexalexes, Спасибо за пример, забыл про это свойство, vue только изучаю. Закиньте в ответ, отмечу

[WapSter]

igor_solweb, и с чего же v-modal будет общий

[igor_solweb]

WapSter, новичок в веб-разработке, изучаю и vue и js подтягиваю. за совет спасибо, обязательно подучу

Answer 1

[Gimir]

Была похожая задача, приходил объект описывающий поля формы, из которого нужно было сделать готовую форму.
Допустим такой объект:

{
   form_id: 12,
   submit_btn_text: 'Отправить',
   post_url: 'https://someurl.com/api/',
   form_fields: [
      { type: 'text', placeholder: 'some plshldr', label: 'some label', field_id: 'some_id' },
      { type: 'text', placeholder: 'some plshldr', label: 'some label', field_id: 'some_id' },
      { type: 'text', placeholder: 'some plshldr', label: 'some label', field_id: 'some_id' }
   ]
}

И заранее прописать для такой формы поля в data() не получится.
Я сделал это следующим образом:
в beforeMount() я пробегался по массиву form_fields и создавал новый объект (допустип field_models) с уникальными ключами для каждого поля и значением пустой строки (в зависимости от типа поля, там могли быть и чекбоксы). Далее в template я итерировал этот массив (form_fields) вот так (при условии что нет чекбоксов)

<input v-for="field in form_fields" :type="field.type" :placeholder="field.placeholder" v-model="field_models[field.id] />

Comments

[igor_solweb]

Спасибо за подробный пример, уже примерно таким же способом сделал, решением отмечу.