Обмен технологиями

Компонент ящика в Vue3 не может повторно отображать данные.

2024-07-12

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

Когда ящик не используется, данные могут отображаться нормально, и идентификатор сведений о щелчке передается нормально. Однако после использования компонента ящика я обнаружил, что функция сведений будет вызываться только один раз, и независимо от того, какая часть информации. при нажатии в будущем информация не будет обновлена. Первое сообщение, но идентификатор был успешно обновлен. Позже я обнаружил, что v-if не был добавлен для определения значения открытия ящика. Если у вас такая же проблема, вы можете обратиться к следующему коду.

компонент ящика:

  1. <!-- 表单弹窗:详情 -->
  2. <el-drawer
  3. v-model="drawer"
  4. title="详情"
  5. :direction="direction"
  6. v-if="drawer"
  7. size ="71%"
  8. class="drawer"
  9. destory-on-close
  10. >
  11. <DetailForm ref="detailRef" :detailId="detailId"/>
  12. </el-drawer>

Импортировать:

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

Как просмотреть детали:

  1. /** 查看详情 */
  2. const detailRef = ref()
  3. const drawer = ref(false)
  4. const detailId = ref()
  5. const details = (type: string, id?: number) => {
  6. drawer.value=true
  7. detailId.value=id
  8. }

Вот и все.

Каждый может критиковать, исправлять или предлагать лучшие способы совместного общения и обучения!