javascript - Issues with dynamically adding new form submissions using Elementui
PHP中文网
PHP中文网 2017-05-18 11:02:46
0
1
619

I use a dynamically added form to make voting option conditions. Users need to fill in at least 2 or more when posting a vote. I cannot get multiple input contents when submitting to the background. The following is the code:
1. This is a dynamic form

         <el-form :model="condition" ref="condition" label-width="60px" class="demo-dynamic" style="padding-right:0px;">
           <el-form-item
             prop="cona"
             label="投票条件"
           >
             <el-input v-model="condition.cona"></el-input>
           </el-form-item>
           <el-form-item
             prop="conb"
             label="投票条件"
           >
             <el-input v-model="condition.conb"></el-input>
           </el-form-item>
           <el-form-item
             :required = false
             v-for="(domain, index) in condition.domains"
             label="投票条件"
             :key="domain.key"
             :prop="'domains.' + index + '.value'"
           >
             <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
           </el-form-item>
           <el-form-item>
             <el-button @click="addDomain">新增条件</el-button>
           </el-form-item>
         </el-form>
         

2. The following is the vuejs code part,
data(){
return{

    condition: {
      domains: [{
        value: ''
      }],
      cona: '',
      conb:''
    }

}
}

3. The following is the code submission method, using postJsonp, and there are other options to judge in it

  //发表投票
  handleThem: function () {
    // 防止类型为空
    if (this.themeType === 'undefined' || this.themeType === '') {
      this.dialog.text = '请选择话题类型'
      this.dialog.show = true
    // 判断标题
    } else if (this.title === 'undefined' || this.title === '') {
      this.dialog.text = '请输入标题'
      this.dialog.show = true
      // 判断投票条件
    } else if (this.condition === 'undefined' || this.condition === '') {
        this.dialog.text = '请输入投票条件'
        this.dialog.show = true
     // 判断内容
   } else if (this.editor.getContent() === 'undefined' || this.editor.getContent() === '') {
      this.dialog.text = '请输入内容'
      this.dialog.show = true
    } else {
      let postSubmit = document.getElementById('postSubmit')

      if (postSubmit.disabled) return
      postSubmit.value = '提交中...'
      // 禁用提交按钮
      postSubmit.disabled = 'true'
      postJsonp(config.ajaxUrl + '/total/theme/addTheme1', {
        title: this.title,
        content: this.editor.getContent(),
        themeType: this.themeType,
        condition:this.condition,
        tempFiles:this.dialogVisible,
        itype:this.value,
        count:this.count
      }, (response) => {
        if (response.ok === 1) {

          postSubmit.value = '发表'
          // 启动按钮
          postSubmit.removeAttribute('disabled')
          // 关闭弹窗
          this.$emit(this.hide())
          // 刷新列表
          this.$emit('success')
        } else {
          postSubmit.value = '发表'
          // 启动按钮
          postSubmit.removeAttribute('disabled')
          // 刷新列表
          this.$emit('success')
          this.dialog.text = response.msg
          this.dialog.show = true
        }
      })
    }
  },
  

4. When I submit, condition:[object Object]

PHP中文网
PHP中文网

认证0级讲师

reply all(1)
淡淡烟草味

The key code is addDomain, post it

At the same time, check what the data you submitted looks like in Chrome’s developer toolbar

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template