无法在 vue.js 的挂载钩子上记录 DOM 元素

Question

由于某种原因，在挂载的钩子上，我似乎无法在浏览器上记录 DOM 元素，而我可能想循环遍历元素，或者，作为我最后的手段，我只在 HTML 集合的特定索引上工作：

以下是我遇到问题的 vue 组件：

<template>
  <full-page ref="fullpage" id="fullpage" :options="options">
            <slider class="section" :auto="false">
                <slider-item v-animate-css="'fadeIn'">
                    <h1 class="mainTitle">PROJECT GORILLA</h1>
                </slider-item>
                <slider-item v-for="bkg in bkgImg" :style="{backgroundSize:'cover', 
                backgroundImage: 'url(' + bkg + ')'}">
                <h1 class="mainTitle">PROJECT GORILLA</h1>
                </slider-item>
        </slider>
  </full-page>
</template>
<script>
import { Slider, SliderItem } from 'vue-easy-slider'
import pinkBkg from '@/assets/img/IMG_2473.jpg'
import redBkg from '@/assets/img/IMG_4674.jpg'
import blueBkg from '@/assets/img/IMG_4716.jpg'
import greenBkg from '@/assets/img/IMG_2013.jpg'

export default {
    data(){
      return {
        options:{
          licenseKey:null
        },
        bkgImg:[pinkBkg,redBkg,blueBkg,greenBkg]
      }
    },
    components: {
        Slider,
        SliderItem
    },
    mounted(){
        let slides = document.getElementsByClassName("slider-item");

        console.log(slides[0]);


    }
}
</script>
<style>

.slider-item:nth-of-type(1) { background-color:black;}

.slider-item > .wrap {
    display:flex;
    justify-content: center;
    align-items:center;
}
h1.mainTitle {
    position:fixed;
    z-index:99;
    color:white !important;
}
.slider-item {
    z-index:98 !important;
}

</style>

请记住，我目前正在为 vue-cli 使用 webpack 模板。老实说，jQuery 作为最后的手段已经越过我的脑海，但我真的不想 诉诸于此，因为应用程序具有良好的性能很重要...... 在这种情况下，console.log 返回未定义。但是如果我在浏览器上复制并粘贴代码，那么它会正常工作。

Answer 1

当你的组件被挂载时，并不一定意味着其中的子组件被完全渲染。

正如您在模板中看到的，没有带有class="slider-item" 的 HTML 元素。我想这些会在稍后呈现 SliderItem 组件时出现。

您可以将ref 属性添加到您要引用的任何元素或组件。

例如

<slider-item ref="sliderItem" v-animate-css="'fadeIn'">
  <h1 class="mainTitle">PROJECT GORILLA</h1>
</slider-item>
<slider-item ref="sliderItemRepeater" v-for="bkg in bkgImg"
             :style="{backgroundSize:'cover', backgroundImage: 'url(' + bkg + ')'}">
  <h1 class="mainTitle">PROJECT GORILLA</h1>
</slider-item>

然后在你的mounted钩子里，你就可以访问了

this.$refs.sliderItem // the first, non-repeating component
this.$refs.sliderItemRepeater // an array of the repeated components

见https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements