如何在使用腳本設定的vue組合API中滾動顯示？

我有一個父應用程式（parent.vue），它從子應用程式（MainMenu.vue）發出值，該值用于在父應用程式中按 id 在特定的頁面視圖中滾動，但是當我運行它時會給出錯誤訊息TypeError: document.getElementById(...) is null。

這是我想在特定頁面瀏覽中滾動的父應用程式

parent.vue

<template>
  <section>
    <MainCover></MainCover>
    <QuotePage></QuotePage>
    <GroomBride id='1'></GroomBride>
    <TimeLines id='2'></TimeLines>
    <RunDown id='3'></RunDown>
    <SpecialInvitation></SpecialInvitation>
    <LiveStream></LiveStream>
    <OurMoment id='4'></OurMoment>
    <MessageBox id='5'></MessageBox>
    <FooterPage></FooterPage>
    <MainMenu @coba="onCoba" @page="navigation"></MainMenu>
  </section>
</template>

<script setup>
import QuotePage from '@/components/QuotePage.vue'
import MainCover from '@/components/MainCover.vue'
import GroomBride from '@/components/GroomBride.vue'
import TimeLines from '@/components/TimeLines.vue'
import RunDown from '@/components/RunDown.vue'
import SpecialInvitation from '@/components/SpecialInvitation.vue'
import OurMoment from '@/components/OurMoment.vue'
import MessageBox from '@/components/MessageBox.vue'
import FooterPage from '@/components/FooterPage.vue'
import MainMenu from '@/components/MainMenu.vue'
import LiveStream from '@/components/LiveStream.vue'


// Navigation handler
const navigation = val => {
  console.log(val);
  document.getElementById(val).scrollIntoView({
    behavior: 'smooth'
  })
}

</script>

這是我向父級發出值的子應用程式，

MainMenu.vue

<template>
  <div class="container">
      <div class="notification is-primary p-2">
              <!-- <span  @click="editEvent(day.id, event.details)"><fa :icon="['fas', 'pencil']" /></span>
              <span @click="deleteEvent(day.id, event.details)"><fa :icon="['fas', 'trash']" /></span> -->
          <span class="icon-text is-paddingless is-marginless">
              <span @click="navPage('1')" class="icon">
                  <font-awesome-icon icon="fa-solid fa-heart" />
              </span>
              <!-- <span>Couple</span> -->
              <span @click="navPage('2')" class="icon">
                  <font-awesome-icon icon="fa-solid fa-calendar-days" />
              </span>
              <!-- <span>Date</span> -->
              <span @click="navPage('3')" class="icon">
                  <font-awesome-icon icon="fa-solid fa-map" />
              </span>
              <!-- <span>Location</span> -->
              <span @click="navPage('4')" class="icon">
                  <font-awesome-icon icon="fa-solid fa-images" />
              </span>
              <!-- <span>Galleries</span> -->
              <span @click="navPage('5')" class="icon">
                  <font-awesome-icon icon="fa-solid fa-pen-to-square" />
              </span>
              <!-- <span>Wishes</span> -->
          </span>
      </div>
  </div>
</template>

<script setup>
import { defineEmits } from "vue";

const emit = defineEmits(['page']);


const navPage = (value) => {
    emit("page", value)
}

</script>

我認為錯誤出在從腳本設定訪問 dom 中。我試過但沒有得到解決，請幫助。謝謝

uj5u.com熱心網友回復：

完成了，我更新了我的代碼

MainMenu.vue

<template>
  <div class="container">
      <div class="notification is-primary p-2">
          <span class="icon-text is-paddingless is-marginless">
              <span @click="navPage('groom')" class="icon">
                  <font-awesome-icon icon="fa-solid fa-heart" />
              </span>
              <!-- <span>Couple</span> -->
              <span @click="navPage('time')" class="icon">
                  <font-awesome-icon icon="fa-solid fa-calendar-days" />
              </span>
              <!-- <span>Date</span> -->
              <span @click="navPage('run')" class="icon">
                  <font-awesome-icon icon="fa-solid fa-map" />
              </span>
              <!-- <span>Location</span> -->
              <span @click="navPage('moment')" class="icon">
                  <font-awesome-icon icon="fa-solid fa-images" />
              </span>
              <!-- <span>Galleries</span> -->
              <span @click="navPage('message')" class="icon">
                  <font-awesome-icon icon="fa-solid fa-pen-to-square" />
              </span>
              <!-- <span>Wishes</span> -->
          </span>
      </div>
  </div>
</template>

<script setup>
import { defineEmits } from "vue";

const emit = defineEmits(['page']);


const navPage = (value) => {
    emit("page", value)
}

</script>

parent.vue

<template>
  <section>
    <MainCover></MainCover>
    <QuotePage></QuotePage>
    <div ref="groom">
      <GroomBride></GroomBride>
    </div>
    <div ref="time">
      <TimeLines></TimeLines>
    </div>
    <div ref='run'>
      <RunDown></RunDown>
    </div>
    <SpecialInvitation></SpecialInvitation>
    <LiveStream></LiveStream>
    <div ref='moment'>
      <OurMoment></OurMoment>
    </div>
    <div ref='message'>
      <MessageBox></MessageBox>
    </div>
    <FooterPage></FooterPage>
    <MainMenu @page="navigation"></MainMenu>
  </section>
</template>

<script setup>
import QuotePage from '@/components/QuotePage.vue'
import MainCover from '@/components/MainCover.vue'
import GroomBride from '@/components/GroomBride.vue'
import TimeLines from '@/components/TimeLines.vue'
import RunDown from '@/components/RunDown.vue'
import SpecialInvitation from '@/components/SpecialInvitation.vue'
import OurMoment from '@/components/OurMoment.vue'
import MessageBox from '@/components/MessageBox.vue'
import FooterPage from '@/components/FooterPage.vue'
import MainMenu from '@/components/MainMenu.vue'
import LiveStream from '@/components/LiveStream.vue'

import { ref, onMounted } from "vue";

const groom = ref()
const time = ref()
const run = ref()
const moment = ref()
const message = ref()


// // Navigation handler
const navigation = val => {
  console.log(val)
  if (val == 'groom') {
    groom.value.scrollIntoView({behavior: "smooth"})
  } else if (val == 'time') {
    time.value.scrollIntoView({behavior: "smooth"})
  } else if (val == 'run') {
    run.value.scrollIntoView({behavior: "smooth"})
  } else if (val == 'moment') {
    moment.value.scrollIntoView({behavior: "smooth"})
  } else if (val == 'message') {
    message.value.scrollIntoView({behavior: "smooth"})
  }
}


onMounted( () => {
  navigation();
})

</script>

標籤：javascriptdomVuejs3vue-composition-apivue 脚本设置

上一篇：瀏覽器究竟何時重繪和重排？

下一篇：有沒有更好的演算法可以更快地解決這個問題