在mounted() 上使用this.$el.queryselector 时出错

Question

所以我对使用 vue 非常陌生，目前我正在使用 vue 进行我的第一个项目，但我很茫然。所以让我解释一下..

首先是我的标记。在我的标记中，我添加了一个<template v-if="data"></template>，所有标记都包含在其中。这是它的样子：

  <div class="main-template">
    <template v-if="data">
       <!-- markup -->
    </template>
  </div

现在我的模板中有一个图像滑块，我想在我的 vue 实例中初始化滑块，所以根据我的研究，我做了这样的事情：

methods: { 
  sliderInit(){
    const ImgSlider = this.$el.querySelector('.slider-container'),

    var flikty = new Flickity(ImgSlider, { 
        contain: true, 
        imagesLoaded: true, 
        cellAlign: 'left',
        pageDots: false, 
        arrowShape: 'M 15,50 L 65,100 L 70,95 L 25,50  L 70,5 L 65,0 Z', 
        lazyLoad: 5 }
    )
  }
}, 
mounted() {
  this.sliderInit()
}

但我收到一条错误消息，提示 Bad element for Flikity: null。所以我尝试控制台记录我的ImgSlider，结果它返回null。我尝试过其他解决方案，例如使用 watch: 和 this.$nextTick() 但 ImgSlider 始终记录为 null。

现在我确实使用update() 和setTimeout(() => {}, timeout) 解决了它一次，但更新会在每次状态更改时重新初始化滑块，并且 setTimeout 并不理想。这并不理想，因为除了初始化滑块之外，我还需要使用 Flikity 的 API 添加事件，如果我什至无法使用 querySelector 在我的 vue 实例中正常选择元素，那么我将无法正确编码其他事件，这就是为什么只使用setTimeout 并不理想。

所以更具体地说，我怎样才能正确使用querySelector？我的代码中是否有任何问题阻止我在this.$el 上使用querySelector？如果我可以让查询选择器在挂载时正常运行，那么这已经是一个很大的帮助，我至少可以从那里拿走它。 谢谢！ :D

Answer 1

你可以用 ref 代替

<div ref="mainTemplate" class="main-template">
      <template v-if="data" />
    </div>
...
sliderInit(){
    const ImgSlider = this.$refs.mainTemplate
}

Answer 2

例如，您可以使用双下一个刻度：

 this.$nextTick(() => { this.$nextTick(() => { //code }) })

除此之外，您可以尝试使用Flickity-Vue，您不需要这样的解决方法，但这意味着其他依赖项，所以这是您的选择。

另一种解决方案是使用 vanilla js 选择元素。你甚至可以像文档中所说的那样编写它：

  var flikty = new Flickity('.main-template', { 
        contain: true, 
        imagesLoaded: true, 
        cellAlign: 'left',
        pageDots: false, 
        arrowShape: 'M 15,50 L 65,100 L 70,95 L 25,50  L 70,5 L 65,0 Z', 
        lazyLoad: 5 }
    )
  }