How to bind an object on the select input's x-model

[ppshobi]

I have the following template

<select  x-model="plan" name="plan">
       <template  x-for="p in plans">
            <option x-text="p.slug" x-bind:value="p"></option>
       </template>
</select>

How do I return the full object to the plan x-model? , as of now the plan is coming as a string "[object Object]", how do I return the full object from the options?

[ryangjchandler]

x-model does not work with objects since it can only have a single value. You would instead need to use a scalar prop (string, int, bool) or an object property.

[ppshobi]

Thank you, I was thinking the same, but since we can do it in vue, I was wondering if there is a way.

[SimoTod]

Unfortunately, since Alpine doesn't have a virtual DOM like vue, any properties you bind go into the real DOM and get converted to strings.