v-model does not work with JS expression

[TomDeSmet]

If I use v-model with a Boolean variable, everything works fine: v-model="isOpen"

But If I use a JavaScript expression. Things fall apart: v-model="modalToOpenId === 'teamMemberX'"

I I put that same JavaScript expression in a computed and use that as the v-model variable, it works again. I have never seen this not working anywhere before, so I have no idea what is going on with it.

[kouts]

Hello @TomDeSmet, can you post a Stackblitz or a Codesandbox example of this? Could it be that the modalToOpenId is a Number and so the expression evaluates to false?

[Antimated]

@kouts I'm a team member of @TomDeSmet . the modalToOpenId is for sure a String. Outputting modalToOpenId === 'teamMemberX' evaluates to true or false. When we use a computed method like so:

    const test = computed(() => {
        return modalOpenId.value === 'modalTeamMember';
    })

and use test as the v-model it works as expected.

[kouts]

So the issue here is that v-model works with reactive values, not expressions. v-model keeps the value passed in sync with the internal value, in the expression's case how would it know which value to update? I guess this is a Vue thing and not a vue-modal issue and it's how it's expected to behave.

[TomDeSmet]

Sorry @kouts I guess my mind was already set to "holiday-mode" :)