An alternative to fix Can only bind to an Identifier or MemberExpressionsvelte?

[frederikhors]

Until now I was using this code:

type filters = {
    playerAgeGt: number;
    // ...
}

<AgeSelector bind:age={filters.playerAgeGt} />

Now the code changed like this:

type filters = {
    playerAge?: {
        gt: number,
    };
    // ...
}

<AgeSelector bind:age={filters.playerAge?.gt} />

and obviously I'm getting this error from Svelte:

Can only bind to an Identifier or MemberExpressionsvelte (bind_invalid_expression)

Can you please suggest a way to fix this?

[brunnerh]

This code works as is, I'm assuming you actually tried to use this instead:

<AgeSelector bind:age={filters.playerAge?.gt} />

The most common way around this is to expose and use an event for change propagation instead of the binding.
Something like this:

<AgeSelector
  age={filters.playerAge?.gt}
  onAgeChange={newAge => {
    if (filters.playerAge == null) return;
    filters.playerAge.gt = newAge;
  }} />

[frederikhors]

I'm assuming you actually tried to use this instead

Yeah, you're right, updated the question.

expose and use an event for change propagation instead of the binding

But I want to use binding which is really cool and RAD!

[brunnerh]

But I want to use binding which is really cool and RAD!

Well, unless you change the object, wrap it in a proxy or something like that, you can't.

The simplest wrapper would be something like this:

const age = {
  get value() { return filters.playerAge?.gt; },
  set value(v) {
    if (filters.playerAge == null) return; // or create object if that makes sense here
    filters.playerAge.gt = v;
  },
};

<AgeSelector bind:age={age.value} />

(Should only work in Svelte 5, in Svelte 3/4 you would probably need reactive statements to replace the wrapper every time something changes.)

[frederikhors]

Thank you very much!

Is there a way I can change the playerAge on filers using get and set?

I tried but I don't know how to handle gt, lt and so on...

[frederikhors]

I tried this:

export const newFiltersPlayer = () => {
    return {
        get playerAge() {
            return this.playerAge;
        },
        set playerAge(v) {
            set gt(v) {
                if (this.playerAge == null) return;
                this.playerAge.gt = v;
            },
            set lt(v) {
                if (this.playerAge == null) return;
                this.playerAge.lt = v;
            }
        }
    };
};

Is it possible?

[brunnerh]

Not quite sure what you try to do.
What version of Svelte are you using?
Can you create a full standalone example (possibly by modifying the REPL I linked to if v5)?

One thing that cannot work is get playerAge returning this.playerAge, that is a circular reference.
An object with getters and setters for gt/lt should probably be returned from get playerAge.
There does not necessarily need to be any set playerAge, unless you want to be able to replace the entire object.