BKWLD / vue-tween-number

A Vue component that tweens a number value.
MIT License
5 stars 7 forks source link

Error in callback for watcher #2

Closed Bradleykingz closed 6 years ago

Bradleykingz commented 6 years ago

I get the following error

[Vue warn]: Error in callback for watcher "value": "TypeError: t.match is not a function"

found 
 <TweenNum> at index.vue

when using the following code:

<tween-num
                   :value='Math.round(100 * value)/100'
                   :initial='0'
                   :duration='500'
                   :formatter="format"
                    easing='easeOutQuart'>
</tween-num>

where format is

form(val) {
                return val.toLocaleString()
            }

Removing the formatter seems to get it working normally, but I need the value formatted (with commas). Any idea what the problem could be?

weotch commented 6 years ago

In that code snippet, you have the function name being form, not format ... is that it?

Bradleykingz commented 6 years ago

I don't think that's it. That must have been an error on my part.

Here's the full error


TypeError: t.match is not a function
    at w (shifty.js?b778:2)
    at eval (shifty.js?b778:2)
    at Array.forEach (<anonymous>)
    at e.each (shifty.js?b778:2)
    at b (shifty.js?b778:2)
    at eval (shifty.js?b778:2)
    at Array.forEach (<anonymous>)
    at t.o (shifty.js?b778:2)
    at eval (shifty.js?b778:2)
    at Array.forEach (<anonymous>)

This is followed by the following error being thrown quite a number of times

```javascript
Uncaught TypeError: Cannot read property 'match' of undefined
    at w (shifty.js?b778:2)
    at eval (shifty.js?b778:2)
    at Array.forEach (<anonymous>)
    at e.each (shifty.js?b778:2)
    at b (shifty.js?b778:2)
    at eval (shifty.js?b778:2)
    at Array.forEach (<anonymous>)
    at t.o (shifty.js?b778:2)
    at eval (shifty.js?b778:2)
    at Array.forEach (<anonymous>)

It seems when the formatter returns anything other than a float or number (in this case a String), the error is thrown (but I could be wrong).

This is my current implementation of the format function

```javascript
formatPrice(value) {
                let val = (value / 1).toFixed(2).replace(',', '.');
                return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            }
xtongs commented 6 years ago

@weotch I guess the version on npmjs.com is outdated.

weotch commented 6 years ago

Oh, thanks @xtongs. @Bradleykingz try updating to v0.2.0

Bradleykingz commented 6 years ago

Perfect. Works like a charm