无法在 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作为最后的手段已经出现在我的脑海中，但我真的不想 诉诸于此，因为应用程序具有不错的性能很重要...... 在本例中.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://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements