VueJS与大型表格

Question

我有一个包含20多个字段的庞大表单。我觉得我现在写的代码有很多冗余。什么是最好的方式？

<script>
new Vue({
    data : {
        user : {
            first_name : "",
            last_name : "",
            username : "",
            and 20+.........
        }
    }
});
</script>

<form>
    <input name="first_name" v-model="first_name">
    <input name="last_name" v-model="last_name">
    <input name="username" v-model="username">
    and 20+......... input fields
</form>

我觉得这样的事情会很好。用户对象将动态创建..这可能吗？

<script>
new Vue({
    data : {
        user :  Object
    }
});
</script>

<form v-model="user">
    <input name="first_name">
    <input name="last_name">
    <input name="username">
    and 20+......... input fields
</form>

提前谢谢

Answer 1

怎么样

data: {
  fields: { name: {v:''}, surname: {v:''}, ... }
}

和

<input v-for="(val, prop) in fields" :name="prop" v-model="val.v" />

Answer 2

完全在Vue 2中重做

您的方法与通常的Vue方法相反，因为您希望在视图中布置数据结构并让Vue选择它，而不是将其放在数据中并让Vue渲染它。如果您想要实现自定义布局，我可以看到这是多么可取。

非常规需求需要非常规解决方案，因此这种方法非常规。特别是，通常不建议子组件修改父组件中的数据。

也就是说，方法是创建一个组件，将接受表单输入作为插槽，将父对象作为prop。在console.log(769 + 3.8 + 10 / 38); 中，它会获得具有mounted属性和

的所有input字段

1. 使用name
在父对象中创建成员
2. 在新创建的成员上设置监视
3. 添加$set事件侦听器以完成双向绑定

您可能希望为组件添加更多道具，以使表单本身更加通用，但这为您提供了您正在寻找的功能。

＆＃13;
＆＃13;
input
＆＃13;
Vue.component('autoBindingForm', {
  template: '<form><slot></slot></form>',
  props: ['createIn'],
  mounted() {
    const inputs = this.$el.querySelectorAll('input[name]');

    for (const i of inputs) {
      this.$set(this.createIn, i.name, i.value);
      this.$watch(`createIn.${i.name}`, (newVal, oldVal) => {
        i.value = newVal;
      });
      i.addEventListener('input', (e) => {
        this.createIn[i.name] = i.value;
      });
    }
  }
});

const vm = new Vue({
  el: '#app',
  data: {
    user: {}
  }
});

// Testing that binding works both ways
setTimeout(() => {
  vm.user.last_name = 'Set it';
}, 800);
＆＃13;
＆＃13;
＆＃13;