jQuery滑块无法在Vue组件中工作

Question

我对在vue组件中使用this jquery slider感兴趣，但是无法完成这项工作。我正在使用CDN中的jQuery，并且滑块的javascript位于单独的.js文件中。

根据脚本，应该将“正在加载”类添加到幻灯片，并将图像链接从data-src添加到img src属性，但这没有发生。似乎脚本没有触发，但是我做了console.log，我可以看到日志。

我的组件：

    <template>
    <div class="cities slideshow screen-height" data-js="city-slider" data-transition="">
        <div class="slideshow-inner"> 

            <div class="cities__slider slides"> 
                <div class="cities__slide slide" 
                    v-for="(post, index) in posts"
                    :class="{ 'is-active': index === 0 }"
                    :key="post.id">
                    <div class="slide__slide-content">
                        <span></span>  
                        <h2>
                            <!-- <a href="#Philadelphia">Philadelphia</a> -->
                            <archive-link
                                v-for="category in post.authors"
                                :key="category"
                                archive-type="authors"
                                :archive-id="category"
                            />
                        </h2>
                    </div>
                    <div class="image-container">
                        <img
                            src="data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs="
                            :data-src="post.media_full"
                            class="image queue-loading as-background"/>
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <filter id="blur">
                        <feGaussianBlur stdDeviation="3" />
                        </filter>
                    </svg>
                    </div>
                </div>
            </div>

            <nav class="pages">
                <ul>
                    <li class="page"
                        v-for="(author, index) in authors"
                        :class="{ 'is-active': index === 0 }"
                        :key="author.id">
                            <a href="#" class="page__link">
                                <i data-js="page-loader"></i>
                                {{author.name}}
                            </a>
                    </li>
                </ul>
            </nav>

            <div class="arrows">
                <div class="arrow prev" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
                <span class="svg svg-arrow-left">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 26" enable-background="new 0 0 30 26"><path d="M13 26c-.3 0-.5-.1-.7-.3l-12-12c-.4-.4-.4-1 0-1.4l12-12c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-11.3 11.3 11.3 11.3c.4.4.4 1 0 1.4-.2.2-.4.3-.7.3z"/><path class="arrow__line" d="M29.9 13.1h-28.4"/></svg>
                </span>
                </div>
                <div class="arrow next" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
                <span class="svg svg-arrow-right">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 26" enable-background="new 0 0 30 26"><path d="M16.9 0c.3 0 .5.1.7.3l12 12c.4.4.4 1 0 1.4l-12 12c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l11.3-11.3-11.3-11.3c-.4-.4-.4-1 0-1.4.2-.2.5-.3.7-.3z"/><path class="arrow__line" d="M0 12.9h28.5"/></svg>
                </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ArchiveLink from '@/components/utility/ArchiveLink'

export default {
  name: 'HomeSlider',
  components: {
      ArchiveLink
  },
  data() {
    return {
      request: {
        type: "quote",
        params: {
          per_page: 5,
        }
      }
    }
  },
  computed: {
    posts() {
      return this.$store.getters.requestedItems(this.request)
    },
    authorsRequest() {
      return { type: 'authors', id: this.posts.authors, batch: true }
    },
    authors() {
      return this.$store.getters.singleById(this.authorsRequest)
    },
  },
  methods: {
    getPosts() {
      return this.$store.dispatch('getItems', this.request)
    },
  },
  created() {
    this.getPosts()
  }
}
</script>