Как управлять моделью действительно большой формы в Vue?

Question

Я сейчас пишу действительно большую многостраничную форму (около 60 полей). На последней странице пользователь увидит резюме, поэтому он может проверить все данные перед отправкой.

Все это управляется на одной странице (со слайдами 'page'), поэтому мне нужно автоматически заполнить резюме на основе пользовательских данных. Я делаю это с Vue, что-то вроде этого:

<input name="contact[name]" v-model="name" id="name" type="text" value="" />

... позже в резюме:

<li><b>Name:</b> {{ name }}</li>

... И Vue:

var vueapp = new Vue({
  el: '#form'
  ,data:{
    name:''
  }
});

Хорошо, все хорошо. Но у меня есть около 60 полей, и я должен поместить их все в свойство data объекта Vue. Довольно утомительно.

Поскольку я новичок в Vue, возможно, я делаю это неправильно. Если да, то может кто-нибудь указать мне правильное направление?

Я знаю, что должен задать вопрос на форуме Vue, но они очень медленно отвечают на вопросы ..

Answer 1

Я просто запустил это (следуя предложению @ JacobGoh), используя пустые объекты. Это работало довольно хорошо для моих конкретных потребностей. Кроме того, как вы можете видеть, когда вам нужно использовать наблюдатели или инициализировать свойство (например, для полей выбора, которые обычно необходимы), вы можете просто указать только те связанные свойства. В итоге у меня было около 20 реквизитов вместо того, чтобы 60-70 были фактически обработаны.

var vueapp = new Vue({
  el: '#form'
  ,data:{
    form:{
      contact:{}
      ,compiler:{}
      ,project:{}
      ,current_tools:{}
      ,screw:{
        type: "Flat"
        ,drive_shape: "Phillips"
        ,drive_type: 1
        ,has_mobile_washer: 'no'
        ,material: 'Iron'
        ,finish: 'Oil'
      }
      ,tightening:{}
      ,cicle:{}
      // [and so on...]
    }
  }// data
});