Vue3, как сделать задержку внутри computed?

Question

[Crone01]

Есть некоторое вычисляемое свойство, пример:

//в props передаю reactive значение
const props = defineProps<any>();
const betsArr: ComputedRef<any[] | undefined>  = computed((): any[] | undefined => {
           //как возвращать с задержкой?
            return props.arr;
});

В шаблоне выводится списком тут:

<div v-if="betsArr?.length">
            <BaseButton
                v-for="item in betsArr"
                :key="item.id"
                :text="getResult(item.result)" />
</div>

в props мне попадает какое то значение извне, я за ним слежу, если оно где-либо изменяется - мой список в шаблоне дорисовывается новым элементом

как я могу сделать задержку между отрисовками нового элемента?
поясню - после того как в props появляется новое значение (оно reactive), в betsArr добавляется новый элемент и сразу отрисовывается, как сделать задержку перед отрисовкой?

Comments

[Farkl]

setTimeout?. и зачем тебе задержка?

[Crone01]

Farkl, ну вот надо мне, чтобы они отображались на сразу, как изменяется betsArr, а через секунду, например)

[Crone01]

так а где он должен быть этот setTimeout?

[Farkl]

Crone01, я че не понял у тебя в computed возвращается props? если да, тогда зачем тебе вообще computed?

[Crone01]

окей, допустим в computed будет возвращаться не сам props, а обработанные из него данные)
как внутри него использовать задержку?

[Crone01]

Farkl, ну и у меня в computed может быть сразу несколько наблюдаемых полей, поэтому использую его

[Farkl]

Crone01, ну тогда можно создать переменную и повесить вотч на пропс, и в этом вотчере через setTimeout к созданной переменной присваивать значение пропса, и в computed вместо пропса созданную переменную засунуть.

Answer 1

[Aetae]

Условно как-то так:

const betsArr = ref();
watch(<то что было в computed>, debounce((value) => betsArr.value = value, 1000));