My current issue arises from the input event triggering when I initially assign a value to the v-model. This data is fetched via an API, causing the form to be marked as dirty due to the change. However, this poses a problem in another component where the $v.$anyDirty flag needs to be true for a pop up message to appear asking if the user is sure they want to navigate away. Unfortunately, calling $v.reset() after the data loads doesn't resolve the issue.
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6964647f787f796a7b267d7e6e4b39253b253b267968253a3a">[email protected]</a>/dist/bootstrap-vue.css" rel="stylesheet"/>
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="36545959424542445746760218071805">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b46465d5a5d5b4859045f5c4c691b07190719045b4a071818">[email protected]</a>/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25535040494c4144514065150b120b11">[email protected]</a>/dist/validators.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d3b38282124292c39280d7d637a6379">[email protected]</a>/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>