Skip to content

The WhenVisible component breaks the URL query string with nested arrays #2430

@Dzemy

Description

@Dzemy

@inertiajs/vue3 Version

2.0.14

Backend stack (optional)

Laravel 12.16.0
Php 8.4.7

Describe the problem

When I have the following URL with an indexed array in the query string:

/demos?search=&tags[0][id]=1&tags[0][name]=MIV&tags[0][model_type]=type

And a WhenVisible component is triggered with these props:

<WhenVisible
    :params="{{
        data: {
            page: currentPage + 1
        },
        only: ['demos', 'currentPage'],
        preserveUrl: true,
    }}"
    always
>
</WhenVisible>

The URL is incorrectly changed to:
/demos?search=&tags[][id]=1&tags[][name]=MIV&tags[][model_type]=type&page=2

The issue is that the numeric keys [0] in the tags array are removed, which breaks how the server-side framework (like Laravel) processes the array.

Steps to reproduce

  1. Navigate to a page where the initial URL contains an indexed array in the query string. For example:
    /demos?search=&tags[0][id]=1&tags[0][name]=MIV&tags[0][model_type]=type

  2. On that page, include a WhenVisible component configured to make a partial request while preserving the URL.

<WhenVisible
    :params="{{
        data: {
            page: currentPage + 1
        },
        only: ['demos', 'currentPage'],
        preserveUrl: true,
    }}"
    always
>
    {/* ... content ... */}
</WhenVisible> 
  1. Scroll down the page until the WhenVisible component enters the viewport, which triggers the partial visit.

Actual Result

The browser's URL is updated, but the preserveUrl option fails to maintain the structure of the indexed array. The numeric indexes [0] are stripped from the tags parameter.
The URL becomes:
/demos?search=&tags[][id]=1&tags[][name]=MIV&tags[][model_type]=type&page=2

Expected Result

The new page parameter should be appended to the query string while correctly preserving the entire original URL structure, including the numeric indexes of the tags array.
The URL should be:
/demos?search=&tags[0][id]=1&tags[0][name]=MIV&tags[0][model_type]=type&page=2

Metadata

Metadata

Assignees

No one assigned

    Labels

    vue 3Related to the vue 3 adapter

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions