我遇到的问题是由于input
我第一次为 设置值时正在运行的事件v-model
,这些数据是通过 API 加载的;我理解为什么表单被设置为脏(因为它正在被更改)但这会导致我拥有的另一个组件出现问题,该组件检查$v.$anyDirty
标志是否设置为 true,如果是,则创建一个弹出窗口说“你是确定要离开”,但$v.reset()
在加载数据后调用不起作用。
Vue.use(vuelidate.default);
const { required } = window.validators;
new Vue({
el: "#app",
data: {
todos: [],
todo: ""
},
async created() {
var data = await axios.get("https://jsonplaceholder.typicode.com/todos");
this.todos = data.data.map(d => d.id);
this.todo = this.todos[0];
this.$v.$reset()
},
validations() {
return {
todo: { required }
};
}
});
<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/vuelidate@0.7.4/dist/validators.min.js"></script>
<script src="https://unpkg.com/vuelidate@0.7.4/dist/vuelidate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<div id='app'>
<div class="row">
<div class="col-md-4">
<b-form-select v-model="$v.todo.$model" :options="todos"></b-form-select>
</div>
<div class="col-md-8">
<code>
$anyDirty: {{$v.$anyDirty}}
</code>
</div>
</div>
</div>