Vue表单验证

Question

Vue中，v-for循环出来的输入框，怎么给出非空提示，点击下一步按钮，当第一行为空的时候，提示原料名称不能为空，第二行为空是时，进厂时间不能为空，

HTML：

<ul>
        <li v-for='(list,id) in lists' :key="id">
          <label>{{list.title}}</label>
          <input type="text" :type="list.type" v-model="ylMsg[list.id]" >
          <i v-show = "id!=0" @click="lists.splice(id,1)" class="iconfont icon-delete del-font"></i>
        </li>
      </ul>

js：

export default {
  data () {
    return {
      ylMsg: {'原料名称': '', '进厂时间': '', '原料供应商': '', '原料入库名': ''},
      lists: [
        {id: '原料名称', title: '原料名称'},
        {id: '进厂时间', title: '进厂时间', type: 'date'},
        {id: '原料供应商', title: '原料供应商'},
        {id: '原料入库名', title: '原料入库名'}
      ],
    }
  }
}

这个要怎么加判断啊？

Answer 1

<p v-show="!ylMsg[list.id]">
    {{list.title}}不为空
</p>

如果是blur或者点提交再验证的话自行更改。

Answer 2

你是要做表单验证吗？

<ul>
        <li v-for='(list,id) in lists' :key="id">
          <label>{{list.title}}</label>
          <input type="text" :type="list.type" v-model="ylMsg[list.id]" 
          :rules="{required: true, message: list[index].title +' 不能为空', trigger: 'blur'}">
          <i v-show = "id!=0" @click="lists.splice(id,1)" class="iconfont icon-delete del-font"></i>
        </li>
      </ul>

额，我上面写的rules使用的是Async Validate。

Answer 3

第一个回答的方案就比较可行,要实现下一步验证的话加一个变量就好了

<p v-show="!ylMsg[list.id] && validated">
    {{list.title}}不为空
</p>

validated默认为false，点击下一步的时候置为true