Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

When the drawer is not used, the data can be displayed normally, and the value can be transmitted normally when clicking the detail id. However, after using the drawer component, it is found that the detail function will only be called once. No matter which information is clicked, the information will not be refreshed and will always be the first information. However, the id is refreshed successfully. Later, it is found that v-if is not added to determine the open value of the drawer. If you have the same problem, you can refer to the following code.

Drawer component:

 <!-- 表单弹窗：详情 -->
  <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'

How to view details:

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

That's it.

Welcome everyone to criticize and correct me, or if you have better methods, let’s communicate and learn together!