首页 > 其他分享 >Vue3中drawer组件无法重新回显数据

Vue3中drawer组件无法重新回显数据

时间:2024-07-08 15:56:35浏览次数:16  
标签:const 回显 drawer 详情 Vue3 import ref id

不做drawer的时候数据是可以正常回显的,点击详情id是正常传值的,但是使用了drawer组件以后发现只会调用一次详情功能,以后不管点击哪条信息都不会刷新信息永远都是第一条的信息,但是id刷新成功了,后来发现是没有加v-if来判断drawer的打开值,如果您有一样的问题可以参考以下代码。

drawer组件:

 <!-- 表单弹窗:详情 -->
  <el-drawer
    v-model="drawer"
    title="详情"
    :direction="direction"
    v-if="drawer"
    size ="71%"
    class="drawer"
    destory-on-close
  >
    <DetailForm  ref="detailRef"  :detailId="detailId"/>
  </el-drawer>

import:

import type { DrawerProps } from 'element-plus'
import { ref } from 'vue';
import DetailForm from '@/views/teach/coursemanagePlus/Index.vue'

查看详情方法:

/** 查看详情 */
const detailRef = ref()
const drawer = ref(false)
const detailId = ref()
const details = (type: string, id?: number) => {
  drawer.value=true
  detailId.value=id
}

就可以啦。

欢迎大家批评指正或者有更好的方法一起交流学习!

标签:const,回显,drawer,详情,Vue3,import,ref,id
From: https://blog.csdn.net/qq_50684356/article/details/140270845

相关文章