___anj___ Posts - Answer Overflow

___anj___

Explore posts from servers

•Created by ___anj___ on 8/8/2024 in #❓・help

How to make history.replaceState work with Nuxt?

So we are using Nuxt (2.15) together with Algolia and their Instantsearch. And there is a problem with how the router works. On pages where we have Instantsearch, the routing related to search parameters is handled via this library. So when we apply for example filter or pagination it updates the state of the components and then it calls history.replaceState(...) to update the URL with new search parameters. It is working fine, but now we need to implement another unrelated feature, that requires us to check the current query parameters. And it turned out that there is a problem - if we will try accessing the route like this: const route = useRoute() or even simply $route directly in the template, this property does not change on navigation. It works on the first load on the server side - it correctly returns the route with all the parameters. But when doing client side navigation it just does not update, even though the URL changes. I tried replacing it with router.replace(...). But I think it conflicts with some other logic. It looks like the navigation hapens twice. First time to the correct URL, but then it does the second navigation and it removes all query parameters 🤔 So maybe we would need to keep history.replaceState and somehow make it update the state of the router? Do you have an idea what to do?

1 replies

NNuxt

•Created by ___anj___ on 5/27/2024 in #❓・help

Typing dynamic template refs in a loop

So I was working on some unrelated type refactoring and once I fixed some typing issue, another one arrised. And since it is a little bit non-standard code from around 2 years ago, I wonder how to go about it. So basically we have a carousel like this (I simplified it a bit and omitted unrelated props)

<template>
  <SimpleCarousel :carousel-items="galleryItems">
    <template #default="{ currentItem, index }">
      <img :ref="`carouselItem${index}`">
    </template>
    <template #custom-last-item>
      <iframe :ref="`carouselItem${galleryItems.length}`" />
    </template>
  </SimpleCarousel>
</template>

<template>
  <SimpleCarousel :carousel-items="galleryItems">
    <template #default="{ currentItem, index }">
      <img :ref="`carouselItem${index}`">
    </template>
    <template #custom-last-item>
      <iframe :ref="`carouselItem${galleryItems.length}`" />
    </template>
  </SimpleCarousel>
</template>

As you can see we are assigning refs to elements rendered in a loop (they are slotted into a component that renders them in a loop). And inside the component I'm working on we are getting an active index as a prop:

props: {
  activeIndex: {
    type: Number,
    required: true,
    validator: (activeIndex: number) => activeIndex >= 0
  },
},

props: {
  activeIndex: {
    type: Number,
    required: true,
    validator: (activeIndex: number) => activeIndex >= 0
  },
},

Then using said index we are getting ref of a current item via a function:

const activeCarouselRef = () => {
  return refs[`carouselItem${props.activeIndex}`] as HTMLElement;
};

const activeCarouselRef = () => {
  return refs[`carouselItem${props.activeIndex}`] as HTMLElement;
};

And using this active ref for example like this:

imgPosition.x = activeCarouselRef().getBoundingClientRect().x;

imgPosition.x = activeCarouselRef().getBoundingClientRect().x;

or like this:

activeCarouselRef().style = '...'

activeCarouselRef().style = '...'

Apparently it is working fine. At least at runtime. But typescript has a problem with it saying:

Property 'getBoundingClientRect' does not exist on type 'Element | Vue | Vue[] | Element[]'.
  Property 'getBoundingClientRect' does not exist on type 'Vue'.Vetur(2339)

Property 'getBoundingClientRect' does not exist on type 'Element | Vue | Vue[] | Element[]'.
  Property 'getBoundingClientRect' does not exist on type 'Vue'.Vetur(2339)

Property 'style' does not exist on type 'Element | Vue | Vue[] | Element[]'.
  Property 'style' does not exist on type 'Element'.Vetur(2339)

Property 'style' does not exist on type 'Element | Vue | Vue[] | Element[]'.
  Property 'style' does not exist on type 'Element'.Vetur(2339)

Sooo... now I'm not sure how to proceed. Do you have an idea?

2 replies

Gaming

Programming