Bagaimana untuk mendapatkan nilai tajuk yang diluluskan oleh komponen Topbar dan menggunakan nilai tersebut dalam bahagian pulangan data()? Saya cuba menambah kaedah untuk lulus nilai, tetapi malangnya, walaupun saya dapat konsol log nilai dalam fail induk, ia tidak berfungsi. Saya masih pemula dalam vue js jadi saya ingin mendapatkan bantuan tentang isu ini. Terima kasih!
<template> <div> <Topbar :tabs='tabs' @pass-data="getTabTitle"/> </div> </template> <script> import Topbar from "../components/Navigation/Topbar.vue"; export default { name: "Progress", components: { Topbar, }, data() { return { title:'',//have the emitted value here tabs: [ { link:'', name: "Sec 1", dropdown: false, dropdownTabs:[] }, { link:'', name: "Sec 2", dropdown: false, dropdownTabs:[] } ] } }, methods: { getTabTitle(title) { console.log(title) this.title =title } }, } </script>
Templat bar teratas
<template> <ul class="navbar-nav"> <li @click="onClick(tab.name)" v-for="(tab, index) in tabs.filter((tab)=> tab.dropdown===false)" :key="index"> {{tab.name}} </li> <DropdownMenu v-for="(tab, index) in tabs.filter((tab)=> tab.dropdown===true)" :key="index" :tab="tab" /> </ul> </template> <script> import DropdownMenu from "./DropdownMenu.vue"; export default { name: "Topbar", props: { tabs: Array }, components: { DropdownMenu, }, methods: { onClick(tabName) { this.$emit('pass-data',tabName) } } } </script>
Cuba coretan kod seperti di bawah (luluskan semua tab kepada kanak-kanak dan gelung di sana):