Как правильно получить доступ к значению ссылки, переданному в качестве реквизита в дочернем компоненте? data var видит ⇐ Javascript

[Anonymous]

I have a parent component that has a ref variable that is set after a fetch request, and I'm trying to pass it to a child card component that has a little animation that counts up to that number, but I think I'm not passing it correctly.
The variable shows up correctly and is reactive when referenced directly on the page in the parent and in the child, but when referenced in a data variable it only receives the first value.
in родительский компонент:

Код: Выделить всё

// etc...

var myNumber = ref(0)

const fetchMyNumber = async () => {
// fetch function etc
// on success:
myNumber.value = Number(fetchedNumber)
}

// etc...




{{ myNumber }} // displays the correct fetchedNumber

 // only ever shows 0

в моем компоненте карты подсчета:

Код: Выделить всё

import { nth } from '@/utils/charts'
export default {
name: 'CountUp',
props: {
currency: {
type: Boolean,
default: false
},
suffix: {
type: Boolean,
default: false
},
percent: {
type: Boolean,
default: false
},
to: {
type: Number,
default: null
}
},
data() {
return {
count: 0,
interval: null,
end: this.to // returns 0
}
},
computed: {
// end() {
// return this.to // also returns 0
// },
increment() {
console.log('end: ' + this.end) // sees 0
return Math.ceil(this.end / 30)
}
},
mounted() {
this.interval = setInterval(this.tick, 20)
},
methods: {
tick() {
if (this.count + this.increment >= this.end) {
this.count = this.to.toLocaleString()
return clearInterval(this.interval)
}
this.count += this.increment
}
}
}




{{ to }} // returns correct number!!!
 // Returns 0!

Я проверил typeof() как в родительском, так и в дочернем элементе, и оба являются числовыми, и это то, что запрашивает дочерний элемент.
Я пробовал использовать вычисляемую функцию вместо переменной данных внутри дочернего элемента, но она также возвращает 0.
Когда я передаю число, которое не извлекается из выборки, оно работает правильно, например:

Код: Выделить всё

 //works correctly

Я попробовал переключиться на parseInt или parseFloat вместо Number, и это не сработало.
Я не получаю ошибок в консоли.
А иногда, когда я сохраняю что-то в своей IDE и в горячих обновлениях своего проекта, это работает! Это заставляет меня думать, что я просто неправильно передаю ссылку. Что я делаю не так?

Подробнее здесь: https://stackoverflow.com/questions/798 ... ent-data-v