<p>I'm creating a reusable tab component by watching a tutorial. After watching it, I understood how it works. However, for my project I need to create tabs with a title that can be changed since this is a reusable component so I have to change the title for each new tab but I haven't figured it out yet Find out how. I need to somehow get the title from the TabsWrapper component I added to the page</p> <pre class="brush:php;toolbar:false;"><div class="tab_header">{{title}}</div></pre> <p>Then let this header change the text inside this div, which is the main header of the TabsWrapper component. </p> <pre class="brush:php;toolbar:false;"><div class="tab_header">{{title}}</div></pre> <p>My code: The first is the out-of-component code I added to the homepage of the website. </p> <pre class="brush:php;toolbar:false;"><TabsWrapper> <Tab title="Tab 1">Hello 1</Tab> <Tab title="Tab 2">Hello 2 </Tab> <Tab title="Tab 3">Hello 3</Tab> <Tab title="Tab 4">Hello 4</Tab> </TabsWrapper></pre> <p>The second one is the code inside the component responsible for TabsWrapper</p> <pre class="brush:php;toolbar:false;"><template> <div class="tabs"> <div class="tab_header"></div> <ul class="tabs_header"> <li v-for="title in tabTitles" :key="title" @click="selectedTitle = title" :class=" {selected: title ==selectedTitle}" > {{ title }} </li> </ul> <slot /> </div> </template> <script> import { ref} from 'vue'; import { provide } from 'vue'; export default{ setup(props,{slots}){ const tabTitles=ref(slots.default().map((tab)=> tab.props.title)) const selectedTitle=ref(tabTitles.value[0]) provide("selectedTitle", selectedTitle) return{ selectedTitle, tabTitles, } } } </script></pre> <p>This code gets each title from the Tab</p> <pre class="brush:php;toolbar:false;"><Tab title="Tab 1">Hello 1</Tab></pre> <p>This code renders it</p> <pre class="brush:php;toolbar:false;"><li v-for="title in tabTitles" :key="title" @click="selectedTitle = title" :class=" {selected: title ==selectedTitle}" > {{ title }} </li></pre> <p>I tried repeating the same technique and it worked, but I think there is a better way</p> <p> <pre class="snippet-code-html lang-html prettyprint-override"><code> <div class="tabs"> <div class="tab_header" v-for="headtitle in headTitles" :key="headtitle">{{headtitle}}</div> <ul class="tabs_header"> <li v-for="title in tabTitles" :key="title" @click="selectedTitle = title" :class=" {selected: title ==selectedTitle}" > {{ title }} </li> </ul> <slot /> </div> </template> <script> import { ref} from 'vue'; import { provide } from 'vue'; export default{ setup(props,{slots}){ const tabTitles=ref(slots.default().map((tab)=> tab.props.title)) const headTitles=ref(slots.default().map((tab)=>tab.props.headtitle)) const selectedTitle=ref(tabTitles.value[0]) provide("selectedTitle", selectedTitle) return{ selectedTitle, tabTitles, headTitles, } } } </script></code></pre> </p>

export default {
  props: ['foo'],
  created() {
    // props are exposed on `this`
    console.log(this.foo)
  }
}

<span>{{ foo }}</span>

<li v-for="(item, index) in foo">
  {{item}}
</li>