第一次使用element ui
如上图实现点击添加input之后，无法进行表单验证
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
<div v-for="(item,index) in form.arrayData" :key="item.id" :prop="'form.arrayData.'+index+'.data'" :rules="[{required: true, message: '请填写内容', trigger: 'blur'}]">
<el-input
type="input"
placeholder="请输入网址"
v-model="item.data"
style="width: 70%;margin-top:10px;"
>
</el-input>
<el-button type="danger" icon="el-icon-remove-outline" circle style="padding:5px; margin-top:0.5%" @click="deleteInput(item,index)"></el-button>
</div>
<el-button icon="el-icon-circle-plus-outline" circle style="padding:5px; margin-top:0.5%" @click="addInput"></el-button>
</el-form>
：prop应该怎么修改。。
js代码：
var Main = {
data() {
return {
form: {
arrayData:[
{
id:"",
data:""
}
],
dataNum:0,
},
rules: {
data: [
{ required: true, message: '请填写内容', trigger: 'blur' }
]
},
};
},
methods: {
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
} else {
console.log('error submit!!');
return false;
}
});
},
deleteInput(item,index){
if(this.form.arrayData.length<=1){//如果只有一个输入框则不可以删除
return false
}
this.form.arrayData.splice(index,1)//删除了数组中对应的数据也就将这个位置的输入框删除
},
addInput(item) {
console.log('addInput!');
if(this.form.dataNum >8)
{
this.$message({
showClose: true,
message: '最多添加10条网址!',
type: 'warning'
});
}else
{
this.form.arrayData.push(//增加就push进数组一个新值
{
id:this.form.dataNum++,
data:''
} )
}
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
