У меня проблема со следующей обновленной ошибкой в моем компоненте вкладок навигации:
Возможно, у вас есть бесконечное обновление l oop в функции рендеринга компонента.
Изучив предыдущие вопросы здесь, большинство, похоже, связано с вычисленными свойствами или напрямую изменяет реквизиты, передаваемые в компонент, заставляя их непрерывно перерисовывать. Однако в этом компоненте я не думаю, что я пытаюсь сделать либо.
Vue.component('navigation-tabs', {
props: {
tabs: Array,
title: String,
type: String
},
data() {
return {
navigationTabs: Vue.util.extend([], this.tabs),
selectedTab: {},
tabCounter: 0,
tabType: this.type ? this.type : 'tabs'
}
},
methods: {
navItemClasses(selectedTab) {
if (selectedTab.selected) {
if (this.type) {
return 'bg-gradient-dark text-white';
}
} else if (selectedTab.disabled === true) {
return 'text-danger';
}
},
selectTab(selectedTab) {
if (selectedTab.disabled !== true) {
this.navigationTabs.forEach(tab => {
tab.selected = false;
});
selectedTab.selected = true;
}
}
},
computed: {
activeComponent() {
return this.navigationTabs.filter(x => x.selected === true)[0]
}
},
template: `
<div>
<div>
<ul class="text-md nav" :class="tabType === 'tabs' ? 'nav-tabs' : 'nav-pills'">
<li v-for="(tab, index) in navigationTabs" class="nav-item card-img-holder" v-if="tab.hideForSite !== $parent.site">
<img src="/shared/resources/images/circle.svg" class="card-img-absolute">
<a class="nav-link font-weight-bold" :class="navItemClasses(tab)" @click="selectTab(tab)">
{{ tabCounter++ + ': ' + tab.name }}
</a>
</li>
<h3 v-if="title" class="nav-link font-weight-bold ml-auto pb-0">{{ title }}</h3>
</ul>
</div>
<div v-if="tabType !== 'tabs'" class="border-top my-3"></div>
<div class="my-4 mx-5">
<component :is="activeComponent.component"></component>
</div>
</div>
`,
});
Я даже заметил это только при попытке отобразить / записать значения tabCounter на экране, что позволяет мне отображать точное число рядом с каждой показанной вкладкой. Если я уберу счетчик, я вообще не получу сообщение об ошибке, что мне кажется необычным, поскольку я не особо с этим справляюсь. Меня беспокоит, что на заднем плане что-то не так, потому что даже когда у меня есть только 6 вкладок для отображения, значение счетчика увеличивается до 700.
Я включил копию родительского приложения ниже для справки, любая помощь будет очень признательна.
let app = new Vue({
el: '#app',
data: {
site: '1',
myTabs: [
{
name: 'Example 1',
selected: true,
component: 'example-one'
},
{
name: 'Example 2',
component: 'example-two'
},
{
name: 'Example 3',
component: 'example-three'
},
{
name: 'Example 4',
component: 'example-four'
},
{
name: 'Example 5',
component: 'example-five',
hideForSite: 'DC4'
},
{
name: 'Example 6',
component: 'example-six'
},
{
name: 'Example 7',
disabled: true
},
]
},
created() {
this.site = document.cookie.match('(^|;) ?' + 'Siteinstance' + '=([^;]*)(;|$)')[2].toUpperCase();
}
});
Редактировать: Первоначально я не делал приращение в шаблоне, и вызывал функцию, но не понимаю, почему она вызывается более 600 раз:
<a class="nav-link font-weight-bold" :class="navItemClasses(tab)" @click="selectTab(tab)">
{{ retrievePosition() + ': ' + tab.name }}
</a>
retrievePosition(){
return this.tabCounter++;
},