Nuxt•7mo ago

watching routes not working?

Hello, I've been trying to get route watching the query params to work. https://router.vuejs.org/guide/advanced/composition-api.html#Accessing-the-Router-and-current-Route-inside-setup I currently have a paginator component that modifies the route query params on click and I'm trying to watch for route query changes, but those seem to never occur. Following the docs, I got this code:

const route = useRoute();
const { data, error, refresh } = await useFetch("/api/items", {
  query: route.query
});

watch(() => route.query, () => refresh())

const route = useRoute();
const { data, error, refresh } = await useFetch("/api/items", {
  query: route.query
});

watch(() => route.query, () => refresh())

the refresh never happens. is my approach to pagination wrong? how can I fix this?

Vue Router

The official Router for Vue.js

4 Replies

Sh1beOP•7mo ago

@pyplacca did i miss your message?

manniL•7mo ago

should work, but a computed is easier:

const router = useRouter()
const route = useRoute();
const query = computed(() => route.query)
const { data, error, refresh } = await useFetch(
  'https://jsonplaceholder.typicode.com/users/',
  {
    query,
  }
);

const router = useRouter()
const route = useRoute();
const query = computed(() => route.query)
const { data, error, refresh } = await useFetch(
  'https://jsonplaceholder.typicode.com/users/',
  {
    query,
  }
);

Sh1beOP•7mo ago

sorry for the late response but damn sometimes i forget how awesome vue is! i went for a much more complicated emits approach lol thanks btw love ur videos, ig i should watch more of them haha

manniL•7mo ago

Glad you enjoy them 🙏

Gaming

Programming

watching routes not working?