Nuxt•2y ago

How to update query params without performing a refresh ?

I try to keep in sync a field with query params :

<script setup lang="ts">
const route = useRoute()

const fieldValue = computed(() => route.query.field)

async function updateField(value: string) {
  const query = { ...route.query }
  query.field = value
  await navigateTo({
    path: '/current-path',
    query
  })
}
</script>

<template>
  <input type="text" :model-value="value" @update:model-value="updateField($event)" />
</template>

<script setup lang="ts">
const route = useRoute()

const fieldValue = computed(() => route.query.field)

async function updateField(value: string) {
  const query = { ...route.query }
  query.field = value
  await navigateTo({
    path: '/current-path',
    query
  })
}
</script>

<template>
  <input type="text" :model-value="value" @update:model-value="updateField($event)" />
</template>

However, each time the field is updated, I get a small spinner icon indicating the page is loading. This is not a great user experience. Is it possible to explicity say to ignore navigating, just update query params ?

1 Reply

Unknown User•2y ago

Message Not Public

Gaming

Programming

How to update query params without performing a refresh ?