Javascript Vue引导b-form-select设置vuelidate'；s$anyDirty在加载时变为true

我遇到的问题是由于当我第一次将值设置为

v-model

时运行的

input

事件，该数据是通过API加载的；我理解为什么表单被设置为dirty（因为它正在被更改），但这会在我拥有的另一个组件中导致问题，该组件会检查标志是否设置为true，如果设置为true，则会创建一个弹出窗口，说“您确定要导航离开”但在加载数据后调用不起作用

Vue.use（vuelidate.default）；
const{required}=window.validators；
新Vue({
el:“应用程序”，
数据：{
待办事项：[]，
todo:“
},
异步创建（）{
var data=await axios.get（“https://jsonplaceholder.typicode.com/todos");
this.todos=data.data.map（d=>d.id）；
this.todo=this.todos[0]；
此.$v.$reset（）
},
验证（）{
返回{
todo:{必需的}
};
}
});


$anyDirty:{{$v.$anyDirty}}

问题在于，
$v.reset（）
在vue呈现之前运行，因此输入事件在呈现之后发生，因此堆栈跟踪如下所示

加载>设置值>重置验证>渲染>输入事件

您需要将重置放在内部，然后它将工作，因为它将更改执行

加载>设置值>渲染>输入事件>重置验证


Vue.use（vuelidate.default）；
常数{
必修的
}=窗口验证程序；
新Vue({
el:“应用程序”，
数据：{
待办事项：[]，
todo:“
},
异步创建（）{
var data=await axios.get（“https://jsonplaceholder.typicode.com/todos");
this.todos=data.data.map（d=>d.id）；
this.todo=this.todos[0]；
Vue.nextTick（（）=>{
此.$v.$reset（）
})
},
验证（）{
返回{
待办事项：{
必修的
}
};
}
});


$anyDirty:{{$v.$anyDirty}}