满口金牙 2022-07-09 15:06 采纳率: 91.1%
浏览 98
已结题

Vue3 这里第一次载入时,插槽不显示

问题描述: 这里第一次载入时,插槽不显示, menuTitle值 怎么在载入时得到呢?

<template>
  <div v-if="visible" id='curr-meun' class="meun-out-div">
    <!-- 菜单 导航栏, 点击导航显示不同的 内容区-->
    <div class="nav-title">
      <span v-for="item in props.navData" :key="item.id" :id="item.id" @click="navSelect($event)"
        :class="item.is_active ? 'nav-active' : 'nav-not-active'">
        {{ $t(item.text) }}
      </span>
    </div>
    <!-- 菜单内容区-->
    <!-- 父组件传过来 多个插槽, 且插槽名与 数组 props.navData 的index 相同 -->
    <!-- @click="navSelect($event)"  获取menuTitle值 来    选择显示的插槽 -->
    <div v-if="menuTitle" >
      <!-- 问题是:  这里第一次载入时,  插槽不显示 -->
      <slot :name="menuTitle"></slot> <!-- @click="navSelect($event)"后 插槽可以正常显示-->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
const props = withDefaults(defineProps<Props>(), {
// 父组件传过来菜单 参数的格式
  navData: () => [{ id: '1', text: 'fontStyle', is_active: true }], 
  visible: false,
})
// menuTitle 这里已经给了默认值.
const menuTitle = ref<string>(props.navData.findIndex((item) => item.is_active).toString())
function navSelect(event: any) {
  menuTitle.value = event.target.id // 点击的对象id 值,和具名插槽名一致
  for (let i of props.navData) {  // 把点击的,is_active数据更新为true
    if (i.id !== event.target.id) {
      i.is_active = false
    } else {
      i.is_active = true
    }
  }
}
</script>




  • 写回答

2条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-07-09 22:01
    关注

    props.navData.findIndex((item) => item.is_active).toString()是index,并不是id
    是不是应该改成 props.navData.find((item) => item.is_active).id

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 7月18日
  • 已采纳回答 7月10日
  • 创建了问题 7月9日

悬赏问题

  • ¥15 【Hadoop 问题】Hadoop编译所遇问题hadoop-common: make failed with error code 2
  • ¥15 vb6.0+webbrowser无法加载某个网页求解
  • ¥15 RPA财务机器人采购付款流程
  • ¥15 计算机图形多边形及三次样条曲线绘制
  • ¥15 根据protues画的图用keil写程序
  • ¥200 如何使用postGis实现最短领规划?
  • ¥15 pyinstaller打包错误
  • ¥20 cesm的气溶胶排放文件
  • ¥15 逐月累计,月份不连续,补齐月份
  • ¥15 应用简单的Python代码完成一个学生成绩管理系统