技術共有

Vue3 のドロワー コンポーネントはデータを再エコーできません

2024-07-12

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

ドロワーを使用しない場合、データは正常にエコーされ、クリック詳細 ID は正常に渡されます。しかし、ドロワー コンポーネントを使用した後、詳細関数はどの情報であっても 1 回しか呼び出されないことがわかりました。今後クリックすると、最初のメッセージは更新されませんが、後でドロワーのオープン値を決定するための 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. }

それでおしまい。

誰もが批判したり、修正したり、コミュニケーションをとって一緒に学ぶためのより良い方法を考えたりすることを歓迎します。