I attempted to enhance the tabsWrapper component by adding a button that, when clicked, selects the next tab. However, my code isn't functioning as expected despite using familiar patterns. My lack of understanding regarding slots, inject, and provide is hindering my progress. Therefore, I require your assistance.
<template>
<div class="tab-content" v-show="title == selectedTitle || tabTitles[index] == selectedTitle" >
<slot />
</div>
</template>
<script>
import { inject } from 'vue';
export default{
props:['title'],
setup(){
const selectedTitle=inject('selectedTitle')
const tabTitles = inject('tabTitles')
const index=inject('index')
return{
selectedTitle,
tabTitles, index
}
},
}
</script>
<style scoped>
.tab-content{
padding: 20px;
}
</style>
Within my tab component, I am injecting the index string and tabTitles array from the TabsWrapper component. Additionally, I have included a condition in v-show to render each new tab based on changes to the index value from the TabsWrapper component.
<template>
<div class="tabs">
<div class="tab_header">{{ title }}</div>
<ul class="tabs_header">
<li
v-for="title in tabTitles"
:key="title"
@click="selectedTitle = title"
:class="{ selected: title == selectedTitle}"
>
{{ title }}
</li>
<li @click="next">Next</li>
</ul>
<slot />
</div>
</template>
<!-- Additional components, script, and styling omitted for brevity -->
My usage of the composition API is not extensive, and the pattern I employed to increment the index value was sourced from the Vue.js official documentation. The function is intended to update the index value and display the next tab if the selectedTitle matches any of the tabTitles in the array. Nevertheless, my limited knowledge has impeded my progress.
Each time I click the "Next" button, I encounter the following warning:
[Vue warn]: Maximum recursive updates exceeded. This indicates that a reactive effect is mutating its own dependencies, leading to recursive triggers. Possible sources include the component template, render function, updated hook, or watcher source function.