profile
viewpoint

Ask questionsWrong option selected on init (x-for usage in select)

There are some issues with which option is selected when select's options are generated with x-for. See pen for demo.

Pen: https://codepen.io/hkanaktas/pen/vYNVJYL?editors=1000

Expected behavior

Both selects should display "cucumbers" after the page loads and Alpine initiates component.

Observed behavior

The select with a static option (after x-for'd options) shows the static option as selected. Other one shows the first available option as selected.

Notes

See how selects get correct option selected when you cause any changes in component data. Maybe this issue can be solved by triggering a forced update after selects with x-for'd options are rendered?

alpinejs/alpine

Answer questions hkan

Re-setting the same value in $nextTick was the first thing I tried. It doesn't work. Binding :selected seems to work.

useful!

Related questions

Stopped working on IE11 hot 1
source:https://uonfu.com/
Github User Rank List