@@ -2341,11 +2341,6 @@ If you load this URL in your browser, the ``LiveProp`` value will be initialized
2341
2341
2342
2342
The URL is changed via ``history.replaceState() ``. So no new entry is added.
2343
2343
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
-
2349
2344
Supported Data Types
2350
2345
~~~~~~~~~~~~~~~~~~~~
2351
2346
@@ -2389,6 +2384,50 @@ For example, if you declare the following bindings::
2389
2384
And you only set the ``query `` value, then your URL will be updated to
2390
2385
``https://my.domain/search?query=my+query+string&mode=fulltext ``.
2391
2386
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
+
2392
2431
Validating the Query Parameter Values
2393
2432
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2394
2433
0 commit comments