My code includes a watcher on tabs to prevent them from changing based on the values of the edit. If edit is false, then go to the next tab; otherwise, prevent the change. However, when I try to click on the tab heading to change the tab, I encounter an error mentioning "You may have an infinite update loop in watcher with expression 'tabs'". This issue is occurring due to the custom events changes_event and changes_cancel being sent to the parent from the child component.
I need assistance in identifying where I am making a mistake.
<template>
<v-layout row wrap>
<v-flex xs12 sm12 lg12>
<div>
<v-tabs v-model="tabs">
<v-tab href="#information">INFORMATION</v-tab>
<v-tab href="#details">DETAILS</v-tab>
<v-tab href="#services">SERVICES</v-tab>
<v-tab-item value="#information" v-on:changes_event="alertMessage" v-on:changes_cancel="alertPhone" id="information">
<Information />
</v-tab-item>
<v-tab-item value="#details" v-on:changes_event="alertMessage" v-on:changes_cancel="alertPhone" id="details">
<Details />
</v-tab-item>
<v-tab-item value="#services" v-on:changes_event="alertMessage" v-on:changes_cancel="alertPhone" id="services">
<Services />
</v-tab-item>
</v-tabs>
</div>
</v-flex>
</v-layout>
</template>
import Information from 'views/information/edit.vue';
import Details from 'views/details/edit.vue';
import Services from 'views/services/edit.vue';
export default {
components: {
Information,
Details,
Services,
},
data: function() {
return {
tabs: 'information',
edit: false
}
},
watch: {
tabs(newVal, oldVal) {
if (this.edit) {
this.tabs = oldVal
} else {
this.tabs = newVal
}
}
},
methods: {
alertMessage() {
this.edit = true;
},
alertPhone() {
this.edit = false
}
}
}