the question about the guide of the chapter of the State Transitions

[darkleave]

Transitions & Animation >> State Transitions >> Organizing Transitions into Components

the code here:

Vue.component('animated-integer', {
template: '{{ tweeningValue }}',
props: {
value: {
type: Number,
required: true
}
},
data: function () {
return {
tweeningValue: 0
}
},
watch: {
value: function (newValue, oldValue) {
this.tween(oldValue, newValue)
}
},
mounted: function () {
this.tween(0, this.value)
},
methods: {
tween: function (startValue, endValue) {
var vm = this
function animate () {
if (TWEEN.update()) {
requestAnimationFrame(animate)
}
}

  new TWEEN.Tween({ tweeningValue: startValue })
    .to({ tweeningValue: endValue }, 500)
    **.onUpdate(function (object) {
      vm.tweeningValue = object.tweeningValue.toFixed(0)
    })**
    .start()

  animate()
}

}
})

it should be:
.onUpdate(function () {
vm.tweeningValue = this.tweeningValue.toFixed(0)
})

[chrisvfritz]

Thanks for the issue! 🙂 Could you describe the problem you encountered that this fixes?

[darkleave]

if use the object to acquire the tweeningValue,it would be undefined,
the right way to acquire the tweeningValue is use this,like the source code of the below example.
sorry for my bad english

[SHxKM]

@darkleave - THANK YOU! I've been troubleshooting this for hours. See #2354.