dexie/Dexie.js

How to use liveQuery() in Vue with reactive query paramters

Open

#1528 opened on Mar 31, 2022

View on GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (10,304 stars) (625 forks)batch import
contribution wantedgood first issue

Description

I want to implement a pagination， Did Vue have reactive query variable like React hooks useLiveQuery() second parameter deps?

const limit = ref(50);
const items = useObservable(liveQuery(
        () =>
         db.orderBy("creat")
            .limit(limit.value)  // the limit is reavtive ref, but change limit not triger the items change.
            .toArray()
      ))

Contributor guide

Tech stack
javascriptvue
Domain
frontenddatabase
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Basic knowledge of Dexie.jsVue 3 reactivity
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Check Dexie.js documentation for Vue integration, specifically if liveQuery supports reactive parameters. Look at existing examples or similar issues in the repository. Consider whether a Vue adapter is needed or if there is a workaround using watchEffect.