framework7
framework7 copied to clipboard
feature(vue): support v-model binding on smart-select
This merge request adds a v-model:smart-selection model binding for the smart list element when used on an f7-list-item. Example syntax (as per the kitchen sink update) is something like:
<f7-list-item
v-model:smart-selection="predictedCoinFlip"
title="Predicted outcome"
smart-select
:smart-select-params="{ openIn: 'sheet' }"
>
<select name="coin-flip">
<option value="heads">Heads</option>
<option value="tails">Tails</option>
</select>
</f7-list-item>
The key driver for this change is I wanted a more ergonomic way to programmatically control which item is selected in a smart-select component.
I don't particularly love the model name of smart-selection. Alternatives I considered:
- extend the existing
valueprop to be a model (i.e., add aupdate:valueemit) - call it
selectionor eventselectinstead, but I felt this dropped the clear link to the smart-select component?
This is a completely random drive-by feature, so I'm absolutely fine with it being closed if it's not something you want. If you like the concept but want changes made, I'd be thrilled to adjust the patch to your liking 🙂
Also, I'd be happy to update the docs as well if this feature is accepted.
Thanks for all your hard work on the framework!