Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork4.6k
-
I have an accessorKey "properties.amount" and i have an object "{properties: {amount: '123', ...}, ...}". Now i want to bind to the objects property. I haven't found any solution for this problem. Using $derived only the variable inside the component gets reactive but it doesn't bubble up to the parent. Any ideas? Because i don't want to write multiple components like the following for obvious reasons: <script>import {Input}from'@/components/ui/input/index.js';// def.accessorKey = 'properties.amount'// cell.row.original = {properties: {amount: '123', ...}, ...}let {def, cell}=$props();let levels=def.accessorKey.split('.');</script><divclass="flex space-x-2"> <spanclass="max-w-[500px] truncate font-medium"> {#iflevels.length===1} <Inputbind:value={cell.row.original[levels[0]]}/> {:elseiflevels.length===2} <Inputbind:value={cell.row.original[levels[0]][levels[1]]}/> {:elseiflevels.length===3} <Inputbind:value={cell.row.original[levels[0]][levels[1]][levels[2]]}/> {:elseiflevels.length===4} <Inputbind:value={cell.row.original[levels[0]][levels[1]][levels[2]][levels[3]]}/> {/if} </span></div> |
BetaWas this translation helpful?Give feedback.
All reactions
If you make the binding interact with the source objectand the source object is deeply stateful, this is possible.
Example:
<script>let { def, cell }=$props();let accessor=$derived.by(()=> {constparts=def.accessorKey.split('.');constproperty=parts.at(-1);let o=cell.row.original;for (constkeyofparts.slice(0,-1))o= o[key];return {getvalue() {return o[property]; },setvalue(v) { o[property]= v; },}});</script><inputbind:value={accessor.value} />
In the case of shallow reactivity, thecell needs to be$bindable and the entire object has to be swapped out with an updated version, which is a bit more involved.
Replies: 1 comment 2 replies
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
-
If you make the binding interact with the source objectand the source object is deeply stateful, this is possible. Example: <script>let { def, cell }=$props();let accessor=$derived.by(()=> {constparts=def.accessorKey.split('.');constproperty=parts.at(-1);let o=cell.row.original;for (constkeyofparts.slice(0,-1))o= o[key];return {getvalue() {return o[property]; },setvalue(v) { o[property]= v; },}});</script><inputbind:value={accessor.value} /> In the case of shallow reactivity, the |
BetaWas this translation helpful?Give feedback.
All reactions
👍 1
-
This a great solution, i hadn't thought of abstracting behind a getter/setter. Thank you! |
BetaWas this translation helpful?Give feedback.
All reactions
🎉 1
-
Really elegant solution indeed for a common problem, I wish there was a "recipies" part in the docs where one can browse useful tricks of this kind. |
BetaWas this translation helpful?Give feedback.