How to use dynamic binding data?

[thearabbit]

<animate-number
                :from="from"
                :to="to"
                duration="1000"
                :formatter="formatter"
        ></animate-number>
-------------
data() {
            return {
                // Animate number
                from: 0,
                to: 123.45,
            };
        },

Don't work when change data props

[matthewattanasio]

I would also like to know how to use with dynamic data bindings

[rudolph2907]

A work around that I've found working for me was to use the manual way, first calling reset and then start again after your data bindings updated. this.$refs.{refname}.reset(from, to) this.$refs.{refname}.start()

[ihoment-amu]

i have try it, but not work

[ihoment-amu]

eh, it must set data in reset like this this.$refs.{refname}.reset(this.from, this.to)

[iMomen]

A work around that I've found working for me was to use the manual way, first calling reset and then start again after your data bindings updated. this.$refs.{refname}.reset(from, to) this.$refs.{refname}.start()

this one worked for me.

<animate-number ref="projectsNumber" from="0" :to="totalNumberOfProjects"></animate-number>

and after server request update the number like this:

.then(function(response) {
this.totalNumberOfProjects = this.sectionProjectContent.title;
this.$refs.projectsNumber.reset(0, this.totalNumberOfProjects);
this.$refs.projectsNumber.start();
});

[yogaukha]

Plus, you have to change the mode prop to manual

<animate-number ref="projectsNumber" from="0" :to="totalNumberOfProjects" mode="manual"></animate-number>

[mishengqiang]

<animate-number
    :key="unique value"  
    :from="from"
    :to="to"
    duration="1000"
    :formatter="formatter"
></animate-number>

Each change key is a unique value. https://vuejs.org/v2/api/#key