CODEWITHSUNDEEP
javascriptvue.jsvue-componentbootstrap-vue
Tyler
Tyler

Reputation: 19848

Carousel not initializing due to ReferenceError: onSlideStart is not defined

I have a bootstrap-vue carousel that isn't quite working correctly.

I have the example carousel code from the examples. I've included this script inside of the <div>:

  <script>
    export default {
      data () {
        return {
          slide: 0,
          sliding: null
        }
      },
      methods: {
        onSlideStart (slide) {
          this.sliding = true
        },
        onSlideEnd (slide) {
          this.sliding = false
        }
      }
    }
  </script>

But, I'm still getting this error:

vue.min.js:6 ReferenceError: onSlideStart is not defined
    at Rt.eval (eval at Tn (vue.min.js:6), <anonymous>:2:271)
    at Rt.t._render (vue.min.js:6)
    at Rt.r (vue.min.js:6)
    at Kr.get (vue.min.js:6)
    at new Kr (vue.min.js:6)
    at vue.min.js:6
    at Rt.$mount (vue.min.js:6)
    at Rt.$mount (vue.min.js:6)
    at Rt.t._init (vue.min.js:6)
    at new Rt (vue.min.js:6)

Upvotes: 1

Views: 655

Answers (1)

Tyler
Tyler

Reputation: 19848

Being a noob to vue, I just realized that I can do this at runtime with the following

  new Vue({el: '#carousel',
    data: {
      slide: 0,
      sliding: null
    },
    methods: {
      onSlideStart: function(slide) {
        this.sliding = true
      },
      onSlideEnd: function(slide) {
        this.sliding = false
      }
    }
  })

Upvotes: 1

Related Questions