@@ -2341,11 +2341,6 @@ If you load this URL in your browser, the ``LiveProp`` value will be initialized
23412341
23422342 The URL is changed via ``history.replaceState() ``. So no new entry is added.
23432343
2344- .. warning ::
2345-
2346- You can use multiple components with URL bindings in the same page, as long as bound field names don't collide.
2347- Otherwise, you will observe unexpected behaviors.
2348-
23492344Supported Data Types
23502345~~~~~~~~~~~~~~~~~~~~
23512346
@@ -2389,6 +2384,50 @@ For example, if you declare the following bindings::
23892384And you only set the ``query `` value, then your URL will be updated to
23902385``https://my.domain/search?query=my+query+string&mode=fulltext ``.
23912386
2387+ Controlling the Query Parameter Name
2388+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2389+
2390+ Instead of using the prop's field name as the query parameter name, you can use the ``as `` option in your ``LiveProp ``
2391+ definition::
2392+
2393+ // ...
2394+ use Symfony\UX\LiveComponent\Metadata\UrlMapping;
2395+
2396+ #[AsLiveComponent]
2397+ class SearchModule
2398+ {
2399+ #[LiveProp(writable: true, url: new UrlMapping(as: 'q')]
2400+ public string $query = '';
2401+
2402+ // ...
2403+ }
2404+
2405+ Then the ``query `` value will appear in the URL like ``https://my.domain/search?q=my+query+string ``.
2406+
2407+ If you need to use a custom parameter name on a specific page, you can override the mapping on a per-template basis:
2408+
2409+ .. code-block :: html+twig
2410+
2411+ {# Pass a mapping object #}
2412+ <twig:SearchModule : data-live-url-mapping-query="{ alias: 'q'}" />
2413+
2414+ {# Or configure the mapping option directly #}
2415+ <twig:SearchModule data-live-url-mapping-query-alias="q" />
2416+
2417+ This way you can also use the component multiple times in the same page and avoid collisions with parameter names:
2418+
2419+ .. code-block :: html+twig
2420+
2421+ {# First search module using 'q1' parameter #}
2422+ <twig:SearchModule data-live-url-mapping-query-alias="q1" />
2423+
2424+ {# Second search module using 'q2' parameter #}
2425+ <twig:SearchModule data-live-url-mapping-query-alias="q2" />
2426+
2427+ .. note ::
2428+
2429+ You can configure the mapping in templates only if the ``url `` option is enabled in the ``#LiveProp `` attribute.
2430+
23922431Validating the Query Parameter Values
23932432~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
23942433
0 commit comments