Question

我有一个非常简单的Vue JS单一文件组件，并且在安装的挂钩中，我试图获取元素之一的offsetTop（使用引用）：

mounted () {
  let vm = this
  // console.log(vm.$refs.ttb.$el.offsetTop)
  let navOffset = vm.$refs.ttb.$el.offsetTop
  console.log(navOffset)
}

如果我取消注释第二行并将值记录到控制台，则在两个日志输出中都是正确的（本例中为127）。但是，第二行注释掉后，它始终为0。对为什么有任何想法？

这是模板。这有点复杂，因为要拉入图像并使用称为Quasar的Vue UI框架：

<template>
  <q-layout view="hhh Lpr lFf">
    <q-layout-header>
      <div class="primary">
        <img
          class="center responsive"
          alt="banner"
          src="http://someserver/api/banner"
        />
      </div>
      <q-toolbar ref="ttb"  //HERE IS THE TTB REF
        color="primary"
        :inverted="$q.theme === 'ios'"
      >
        <q-btn
          flat
          dense
          round
          @click="leftDrawerOpen = !leftDrawerOpen"
          aria-label="Menu"
        >
          <q-icon name="menu" />
          <q-tooltip>
            Main Menu
          </q-tooltip>
        </q-btn>
        <q-toolbar-title class="flex flex-center">
          My Title
          <!--<div slot="subtitle">Powered by ePapers</div>-->
        </q-toolbar-title>
        <q-btn flat round dense icon="fas fa-user">
          <q-tooltip>
            Account
          </q-tooltip>
        </q-btn>
      </q-toolbar>

    </q-layout-header>

    <q-layout-drawer
      v-model="leftDrawerOpen"
      :content-class="$q.theme === 'mat' ? 'bg-grey-2' : null"
    >
      <q-list
        no-border
        link
        inset-delimiter
      >
        <q-list-header>Essential Links</q-list-header>
        <q-item @click.native="openURL('http://quasar-framework.org')">
          <q-item-side icon="school" />
          <q-item-main label="Docs" sublabel="quasar-framework.org" />
        </q-item>
        <q-item @click.native="openURL('https://github.com/quasarframework/')">
          <q-item-side icon="code" />
          <q-item-main label="GitHub" sublabel="github.com/quasarframework" />
        </q-item>
        <q-item @click.native="openURL('https://discord.gg/5TDhbDg')">
          <q-item-side icon="chat" />
          <q-item-main label="Discord Chat Channel" sublabel="https://discord.gg/5TDhbDg" />
        </q-item>
        <q-item @click.native="openURL('http://forum.quasar-framework.org')">
          <q-item-side icon="record_voice_over" />
          <q-item-main label="Forum" sublabel="forum.quasar-framework.org" />
        </q-item>
        <q-item @click.native="openURL('https://twitter.com/quasarframework')">
          <q-item-side icon="rss feed" />
          <q-item-main label="Twitter" sublabel="@quasarframework" />
        </q-item>
      </q-list>
    </q-layout-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

更新：好的，我们对此进行了隔离，但是仍然没有最终解决方案。似乎是我们删除了横幅图片，该效果正常。因此，我们假设img src中的http是异步的，并且在完成后将ttb ref元素向下移动，然后我们将其偏移。有什么解决办法的想法吗？

Answer 1

好的-我们弄清楚了，这就是我们所做的。我们将滚动位置的检查移到了从img load事件调用的方法中：

<div class="banner">
  <!-- MOVED CHECK TO getScroll METHOD CALL FROM IMG LOAD -->
  <img
    @load="setScroll"
    class="center responsive"
    alt="banner"
     src="http://localhost:8000/api/apec2018/banner"
   />
 </div>

然后在该方法中，scrollPos是正确的：

methods: {
  getScroll () {
    let h = document.getElementById('ttb')
    let scrollPos = h.offsetTop
    console.log(scrollPos)
  }
}

为什么先将Vue / JS变量登录到控制台后才对其进行设置/纠正？

1 个答案: