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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 有问必答小助手 2022-07-10 07:19
    关注
    您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
    PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632
    评论
查看更多回答(1条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥20 python 3des pyDes库
  • ¥15 关于#mysql#安装失败的问题。MySQL
  • ¥15 想问一下for循环计算表达式的方法,第一次接触
  • ¥15 如何在VA框架上面加功能,去读取框架内任何app数据功能
  • ¥15 关于#c语言#的问题:用c或c++写一个计算下列问题有关软件工程的代码并加上分析
  • ¥15 Zeppelin0.10.0版本升级lib包下的shiro-web
  • ¥15 链表入队的指针内存问题
  • ¥20 vba如何写本地html文件执行js
  • ¥15 VS2022的C#如何创建
  • ¥20 关于#用户注册#的问题,如何解决?