美文网首页
vue动态绑定v-model

vue动态绑定v-model

作者: King斌 | 来源:发表于2021-06-07 12:21 被阅读0次

使用this.$set进行绑定和赋值

    getFormData() {
      const map = this.dataInfo?new Map(Object.entries(this.dataInfo)):new Map();
      getForm(this.formInfo.formId).then(res => {
        if (res.data) {
          this.file = res.data.file
          let list = JSON.parse(res.data.json)
          for (var i = 0; i < list.length; i++) {
            this.drawingList.push({
              ...list[i], 'modelName': list[i].vModel
            })
          }
          this.$set(this.dataForm, "id",map.get("id")?map.get("id"):'')
          for (var i = 0; i < this.drawingList.length; i++) {
            this.$set(this.dataForm, this.drawingList[i].modelName,map.get(this.drawingList[i].modelName)?map.get(this.drawingList[i].modelName):'')
            if (this.drawingList[i].required) {
              let msg = this.drawingList[i].label + '必填'
              this.drawingList[i].regList.push({ required: true, message: msg, trigger: 'blur' })
            }
            this.$set(this.rules, this.drawingList[i].modelName, this.drawingList[i].regList)
          }
          this.loading = false
        } else {
          this.$message.error('获取表单内容失败!')
          this.loading = false
        }
      })
    }

使用model[element.name]绑定

  <el-form-item v-if="element.tagIcon=='number'" :label="element.label" :prop="element.modelName">
            <el-input-number v-model="dataForm[element.modelName]" :placeholder="element.placeholder"
                             :maxlength="element.maxlength"
            ></el-input-number>
          </el-form-item>

相关文章

网友评论

      本文标题:vue动态绑定v-model

      本文链接:https://www.haomeiwen.com/subject/xztceltx.html