使用此时出错$mounted()上的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 }
)
}