<template> <el-row class="wrapper"> <el-col style="margin-bottom: 1rem;"> <el-menu type="border-card" :default-active="currentTopic" style="margin-top: -2px;border: 0;" mode="horizontal" @select="handleSelectTopic"> <el-menu-item index="news">最新</el-menu-item> <el-menu-item v-for="topic in topicNavs" :key="topic.idTopic" :index="topic.topicUri">{{topic.topicTitle}} </el-menu-item> </el-menu> </el-col> </el-row> </template> <script> import {mapState} from 'vuex' export default { name: "topicNav", props: { currentTopic: { type: String, default: 'news' } }, computed: { ...mapState({ topicNavs: state => state.topic.data, isFetching: state => state.topic.fetching }) }, methods: { handleSelectTopic(item) { this.$router.push({ path: `/topic/${item}?page=1` }); } } } </script> <style scoped> </style>