前端表单验证不通过的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

This topic created in 2412 days ago, the information mentioned may be changed or developed.

<el-form :model="taskForm" ref='variableForm'>
  <el-tabs v-model="templateActiveName" type="card">
    <el-tab-pane :label="type" :name="type" v-for="type in ['xxx','xx','xxxxx']" :key='type'>
      <el-tabs tab-position="left" v-model="variableActionName">
        <el-tab-pane v-for="(value,key,index) in taskForm[type]" :label="key" :name="key" :key='index'>
          <el-form-item label="变量替换:" :prop="type+key+'data'" :rules="[{required: true, message: '请输入变量替换的值', trigger: 'blur'}]">
            <el-col :span="15">
              <el-input v-model="taskForm[type][key]['single_data']" placeholder="请输入变量替换的值" @change="check_next_status"></el-input>
            </el-col>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
  </el-tabs>
</el-form>

使用 VUE+element 的框架。请问为什么这个输入框输入了内容，表单验证依然提示未输入。是因为循环的原因吗？如果改需要改成什么样？谢谢

2 replies • 2019-10-03 21:24:27 +08:00

Xenith

Sep 19, 2019

prop 的位置必须与数据结构中的位置相符。比如要验证“taskFrom.XXX.data”，那么 prop 就要写“XXX.data”。如上 prop 应该使用“:prop='`${type}.${key}.data`'”的方式进行拼接。另外主要就是:prop 了，注意正常验证表单项是 prop，而这里是:prop。这里是`反引号而不是'单引号。

BaiLinfeng

Oct 3, 2019

完整的代码在哪里啊？怎么双向绑定一会用全写一会用简写尼