How to trigger a method inside npm package in vue?

user_11642717 0
Viewed 246

I'm new in Vuejs, I'm using vue-countup-v2 npm package I install it, then import it in my Vue component, it's work perfect when I load the page but the point is I want to call the component CountUp when scroll down the screen not when I load the page. in the vu-countup-v2 package, there is a method called start() I can trigger it but I don't know-how.

here is the code:

  <template>
  <div id="main-wrapper" class="flex justify-around w-full p-12 my-12">
      <CountUp
           id="count-up"
           :delay="delay"
           :endVal="endVal[index]"
           :options="options"
      />
  </div>
  </template>

<script>
import CountUp from 'vue-countup-v2';
import inViewport from 'in-viewport';

export default {
  name: "NumberAnime",
  components: {
    CountUp,
  },

  data() {
    return {
      delay: 1000,
      endVal: [40, 300000, 25000, 350],
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: '',
      }
    }
  },

  mounted() {
    inViewport('elementId', 'the function I want to callback')
  },
}
</script>
vue-component npm vue.js webpack javascript
2 Answers

I solved the issue for anyone who needs know-how in the future:

make a v-if condition false in the count tag and when scrolling down make the condition true to start running

<div id="before_count_div" class="text-4xl flex items-end">
            <CountUp
                v-if="options.begin == true"
                id="count"
                :delay="delay"
                :endVal="endVal[index]"
                :options="options"
            />
          </div>

in the data:

options: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: '',
        begin: false,
      }

in the mounted:

mounted() {
    const el = document.getElementById('before_count_div');
    inViewport(el, () => {
      this.options.begin = true;
    })
  },
user_116427170

if i understand correctly, use ref maybe word

<CountUp
       ref="count"
/>

this.$refs.count.start()
user_95557900
Related