Devextreme value 3 js规则同步多个DxDateBox组件

Question

我使用的是DxDateBox组件为我的Vue 3项目。我有2DxDateBox。StartDate应该小于EndDate。我写了一个规则对于每一个。为自己的组件工作。

但是当我更新EndDate的日期时，如果StartDate是好的，规则不确认StartDate是好的。相反的道具也是一样的。我想当我更新其中一个时，所有DxDateBox组件的规则将工作并检查2的值DxDateBox组件。

<template>
<DxDateBox  type="date" displayFormat="dd/MM/yyyy" v-model="StartDate" >
<DxValidator>
<DxCustomRule
message="Should be smaller than Visa End Date" 
:validation-callback="startDateRule"
:reevaluate="true"/>
</DxValidator>
</DxDateBox>
<DxDateBox  type="date" displayFormat="dd/MM/yyyy" v-model="EndDate" >
<DxValidator>
<DxCustomRule
message="Should be bigger than Visa Start Date" 
:validation-callback="endDateRule"
:reevaluate="true"/>
</DxValidator>
</template>
<script>
import {
DxValidator,
DxCustomRule
} from 'devextreme-vue/validator';
import DxDateBox from "devextreme-vue/date-box";

export default{
components:{
DxDateBox,
DxValidator,
DxCustomRule,
},
data() {
return {
StartDate: new Date()
EndDate: new date()
}},
methods:{
startDateRule(e){
if((e.value <=this.EndDate)||(this.StartDate<=this.EndDate )){
return true}
},
endDateRule(e){
if((e.value>=this.StartDate )|| (this.EndDate>=this.StartDate)){
return true}
},
}
}
</script>

Answer 1

对于这种情况，所有组件应该在所有更改后呈现。您应该为每个组件提供密钥，并注意每个更改。当组件值发生变化时，您应该更新其他组件的密钥。我建议您应该为每个更改增加1。这样做的结果是，当组件的值改变时，其他组件的键也会改变，并将被渲染，规则将再次工作