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>

请记住，我目前正在将Webpack模板用于vue-cli。老实说，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

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

1 个答案: