'Element-plus & server side rendering - wrong hydration for select options (ID_INJECTION_KEY not provided)
When form contains two el-select compoents, then both are bound to same options on server side rendered page.
Element+ warns about it with
ElementPlusError: [IdInjection] Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
usage: app.provide(ID_INJECTION_KEY, {
prefix: number,
current: number,
})
It seems, without id, both selects are indistinguishable when client side performing hydration. Anyway, selects/inputs seems to be generated without id at all.
Providing following in app create
app.provide(ID_INJECTION_KEY, {
prefix: 100,
current: 0,
})
dismiss warning, but doesn't help with option binding.
How to fix it properly?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|