Hello, I am new to working with Vue and I am currently trying to utilize props in my component. However, I am facing an issue where the prop data is always undefined and showing as $attrs in the Vue-Debugger.
My Plan: I intend to use the TabWrapper Component to populate the Modal-Component-Slot. The TabWrapper has an unnamed slot for multiple tabs. I am attempting to pass data through props to the Tab component in order to define the "title" and the selected status, with a default of false. Unfortunately, it seems that my props are not being recognized as they appear as "attr" in the Vue Debugger.
parent.vue
.<template>
<div class="options">
<div class="textbox">
<!-- todo -->
<p class="login" @click="$refs.modalName.openModal()">Login / Register</p>
<p class="settings">Settings</p>
<p class="darkmode">Dark Mode
<input @click="toggleTheme" type="checkbox" name="switch" id="switch">
<label for="switch"></label>
</p>
</div>
</div>
<!-- User Settings Modal -->
<BasicModal ref="modalName">
<template v-slot:header>
<h1>Modal Title</h1>
</template>
<template v-slot:body>
<TabWrapper>
<Tab title="Title-A" :selected="true">
Demo Content: A
</Tab>
<Tab title="Title-B" >
Demo Content: B
</Tab>
<Tab title="Title-C">
Demo Content: C
</Tab>
<Tab title="Title-D">
Demo Content: D
</Tab>
</TabWrapper>
</template>
</BasicModal>
</template>
<script>
import BasicModal from '@/components/Ui/BasicModal.vue'
import TabWrapper from '@/components/Ui/TabWrapper.vue'
import Tab from '@/components/Ui/Tab.vue'
export default {
components: {
BasicModal,
TabWrapper,
Tab
},
data() {
return {
theme: ''
}
},
methods: {
toggleTheme() {
this.theme = this.theme == 'darkMode' ? 'root' : 'darkMode'
document.documentElement.setAttribute('data-theme', this.theme);
}
}
}
</script>
tabwrapper.vue
<template>
<div class="tabs-wrapper">
<div class="tabs-navigation">
<ul>
<li v-for="(tab, index) in tabs" :key="index">
<div class="tabs-navigation-item"
:class="{ 'is-active': tab.isActive }"
@click="selectedTab(tab)">
{{ tab.name }}
</div>
</li>
</ul>
</div>
<div class="tabs-content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabs: []
}
},
methods: {
selectedTab(selectedTab) {
this.tabs.forEach(tab => {
tab.isActive = (tab.name === selectedTab.name);
});
}
}
}
</script>
tab.vue
<template>
<div v-show="isActive">
<slot></slot>
</div>
</template>
<script>
export default {
props: {
title: { required: true},
selected: {
type: Boolean,
default: false
}
}
,
data() {
return {
isActive: this.selected,
name: this.title
}
},
created() {
console.log(this.title)
this.$parent.tabs.push(this);
}
}
</script>