Question

我正在尝试根据this pen为Flickity滑块创建一些自定义导航链接。

但是，将JavaScript调整为Vue.js一直很麻烦。这是我在HTML模板中得到的内容：

<template>
  <section class="homepage-clients">
    <ul class="homepage-clients--nav">
      <li v-on:click="navigate">Corporates</li>
      <li v-on:click="navigate">Active Traders</li>
      <li v-on:click="navigate">Banks</li>
      <li v-on:click="navigate">Fund Managers</li>
      <li v-on:click="navigate">Brokers</li>
    </ul>

    <flickity class="homepage-clients--slides" ref="flickity" :options="flickityOptions">
      <div class="homepage-clients--client">
        <h2 class="homepage-clients--client-header">Corporates</h2>
        <p class="homepage-clients--client-description"></p>
        <nuxt-link to="../clients/corporates"><button class="client-slider-button">Learn More</button></nuxt-link>
      </div>

      <div class="homepage-clients--client">
        <h2 class="homepage-clients--client-header">Active Traders</h2>
        <p class="homepage-clients--client-description"></p>
        <nuxt-link to="../clients/active-traders"><button class="client-slider-button">Learn More</button></nuxt-link>
      </div>

      <div class="homepage-clients--client">
        <h2 class="homepage-clients--client-header">Banks</h2>
        <p class="homepage-clients--client-description"></p>
        <nuxt-link to="../clients/banks"><button class="client-slider-button">Learn More</button></nuxt-link>
      </div>

      <div class="homepage-clients--client">
        <h2 class="homepage-clients--client-header">Fund Managers</h2>
        <p class="homepage-clients--client-description"></p>
        <nuxt-link to="../clients/fund-managers"><button class="client-slider-button">Learn More</button></nuxt-link>
      </div>

      <div class="homepage-clients--client">
        <h2 class="homepage-clients--client-header">Brokers</h2>
        <p class="homepage-clients--client-description"></p>
        <nuxt-link to="../clients/brokers"><button class="client-slider-button">Learn More</button></nuxt-link>
      </div>
    </flickity>
  </section>
</template>

在剧本中：

import $ from 'jquery'

export default {
  data () {
    return {
      flickityOptions: {
        initialIndex: 2,
        prevNextButtons: false,
        pageDots: false,
        resize: true
      }
    }
  },
  methods: {
    navigate: function () {
      var $slides = $('.homepage-clients--slides')
      var flickity = $slides.data('flickity')
      var $nav = $('.homepage-clients--nav')
      var $navItems = $nav.find('li')

      $slides.on('select.flickity', function () {
        $navItems.eq(flickity.selectedIndex).addClass('is-selected')
        console.log('beep bloop')
      })

      $nav.on('click', 'li', function () {
        var index = $(this).index()
        $slides.flickity('select', index)
      })
    }
  }
}

我从原始代码中省略了一两件我不需要的东西，但我认为这不重要。但是，当我运行应用程序时，它会在单击时返回以下控制台错误：

Uncaught TypeError: $slides.flickity is not a function
  at HTMLLIElement.<anonymous> (ClientSlider.vue:75)
  at HTMLUListElement.dispatch (jquery.js:5206)
  at HTMLUListElement.elemData.handle (jquery.js:5014)

我是Vue.js的新手所以我认为这里的真正问题是我不太明白如何将CodePen中的JavaScript翻译成Vue风格的代码。任何帮助将不胜感激！

vue-flickity的自定义导航？

0 个答案: