element表单之动态数据循环的表单验证

<template>  	
	<el-form ref="form" label-width="60px" :model="formData" :rules="rules">
	   <div v-for="(item, index) in formData.navigationBar" :key="item.code">
	      <el-form-item
	        label="标题名称"
	        :prop="'navigationBar.' + index + '.title'"
	        :rules="rules.title"
	      >
	        <el-input v-model="item.title" clearable placeholder="请输入" />
	      </el-form-item>
	   </div>
    </el-form>	
</template>
<script>
export default {
  data() {
    return {
      // 绑定数据
      formData: {
        navigationBar: []
      },
      // 校验规则
      rules: {
        title: [{ required: true, message: "标题名称" }]
      },
    };
  },
</script>