详解Vue返回值动态生成表单及提交数据的办法

目录

主要解决的问题

1、vue在循环的时候需要动态绑定不同的v-model；vue动态的表单，数据怎么绑定呢？

2、动态表单上所有name属性对应的键值对的形式提交到后端

一、后端返回的数据，提交到后端的数据格式如下：

// 后端返回的数据，根据返回类型用对应的组件[{    "componentType": "input",    "componentName": "username",    "required": "1", // 提交时是否要必须填写    "name": "姓名"delItems: {}, // vue在循环的时候需要动态绑定不同的v-model      infoList: []    }  },  mounted() {    this.formKeyArr = []    this.getList()  },  methods: {    getList() {      getListData()        .then((res) => {          const infoListData = res.infoList          this.infoList = infoListData          infoListData.forEach((item, index) => {          // 保存属性name和是否必填，后续提交数据用到           // { name: 'username', type: 1 }, { name: 'sex', type: 1}            this.formKeyArr.push({ name: item.componentName, type: item.required })          })        })        .catch(() => {        })    },    clickSubmit() {      const postParams = {} // 提交的数据      let isCanSubmit = true      this.formKeyArr.forEach((item, index) => {        console.log('item=', item)        if (item.type === '1' && !this.modelItems[index]) { // 所有require必须的标记符          // 请先填写完成, toast请填写完整          isCanSubmit = false   www.easck.com     }        postParams[item['name']] = this.modelItems[index]      })      if (isCanSubmit) {      // 可以提交数据      // 可以拿到提交表单数据      // { username: '我的姓名', sex: '0000'  // 对应”男“ }      console.log('postParams=', postParams)      }    }  }}</script><style lang="scss"></style>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!