代码之家  ›  专栏  ›  技术社区  ›  Luca Reghellin

如何在vue中管理真正大型表单的模型?

  •  0
  • Luca Reghellin  · 技术社区  · 6 年前

    我正在写一个非常大的多页表单(大约60个字段)。在最后一页,用户将看到一份简历,因此他可以在发送之前检查所有数据。

    它都是在一个页面中管理的(带有“页面”幻灯片),因此我需要根据用户输入自动填充简历。我是用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论坛,但他们回答问题的速度真的很慢。

    1 回复  |  直到 6 年前
        1
  •  1
  •   Luca Reghellin    5 年前

    我简化它的方法(遵循@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
    });