我正在尝试使用类似的方法来验证一系列日期。
const data = [
{begin: new Date('2019-12-01'),place: '2'},{begin: new Date('2019-12-03'),place: '3'}
... more values
];
// Elements inside data can be added or removed but will have at least one.
此处data[1][begin]应该大于或等于data[0][begin]，并且data[1][place]应该不等于data[0][place]。无论如何要实现这一目标。文档讨论了动态验证，但是我不确定如何使用collection来实现。
您可以考虑在表单提交事件侦听器中实现自定义验证。
这可以通过遍历对象数组并成对比较项目来实现。
HTML
<form
id="app"
@submit="checkForm"
action="/someurl"
method="post"
>
<table border="1">
<tr v-for="(item,index) in dates" :key="index">
<td>
{{index}}
</td>
<td>
{{formatDate(item.begin)}}
</td>
<td>
{{item.place}}
</td>
</tr>
</table>
<input type="date" v-model="dateEntry"/>
<input type="text" v-model="placeEntry"/>
<button type="button" @click="addEntry">Add</button>
<p>
<br>
<input
type="submit"
value="Submit"
>
</p>
<p v-for="error in errorList">
{{error}}
</p>
</form>
JS
new Vue({
el: "#app",data: {
errorList: [],dateEntry: null,placeEntry: null,dates: [
{begin: new Date('2019-12-01'),place: '2'},{begin: new Date('2019-12-03'),place: '3'}
]
},methods: {
addEntry: function(){
if(this.dateEntry == null || this.dateEntry == "")
return false;
if(this.placeEntry == "")
return false;
this.dates.push({
begin: new Date(this.dateEntry),place: this.placeEntry
});
this.dateEntry = null;
this.placeEntry= "";
},checkForm: function(e){
var isValid = true;
var index = 0;
var nextIndex = 1;
this.errorList = [];
while(nextIndex < this.dates.length){
if(nextIndex < this.dates.length){
var isValidDate = this.validDate(this.dates[nextIndex].begin,this.dates[index].begin);
var isValidPlace = this.validPlace(this.dates[nextIndex].place,this.dates[index].place);
if(!isValidDate){
this.errorList.push("Invalid date on index " + nextIndex);
}
if(!isValidPlace){
this.errorList.push("Invalid place on index " + nextIndex);
}
}
index++;
nextIndex++;
}
if(!this.errorList.length){
this.errorList.push("All dates are valid");
return true;
}
e.preventDefault();
},formatDate: function(date){
return date.toDateString();
},validPlace: function(curPlace,prevPlace){
return curPlace != prevPlace;
},validDate: function(curDate,prevDate){
try{
return curDate.getTime() >= prevDate.getTime();
}catch(e){
return false;
}
}
}
})
查看我创建的JS Fiddle来说明我的建议。
另一方面，如果要在运行时构建数组，则可以在将验证添加到数组之前应用验证。