Question

我目前正在写一个非常大的多页表单（大约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个字段，我应该将它们全部放入Vue obj的data属性中。相当乏味。

由于我是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
});

如何在Vue中管理大型表格的模型？

1 个答案: