[F7/Vue] Uncaught Error: Smart Select requires initialized View

Questions
1

I saw, there’s already some traffic on the topic, but no general solution (at least, I didn’t find one).

If I copy e.g. the sample ‘Cars’ from docs/vue into my side-bar-template, I am getting the error above. I haven’t found an explanation what is required to put the smart-select into a template/component (e.g. side-bar)?

Any insights? (Would be helpful in the docs as well)

2

Smart Select by default opens new page with radios/checkboxes. This requires to use router, so it must be inside of <f7-view>. If you open it in popup/sheet/popover and you don’t have parent View then its routableModals parameter to false http://framework7.io/docs/smart-select.html#smart-select-parameters

1 Like
3

Thanks - that worked!
So there is no way to open the smart-select (popup) in a side-pane?

4

You can, just pass routableModals: false to smart select params

5

Hello,

I’ve got same issue. “routableModals: false” doesn’t works for me
What I’ve missed?

Please take a look to my jsFiddle

Regards

6

I was able to work around this using either of the following methods (not sure if these are strictly framework compliant, but they worked for me):

Method 1: set openIn: “popover” in smartSelectParams

<f7-list-item
    smart-select
    :smart-select-params="{
        openIn: 'popover'
    }"
>
    ...
</f7-list-item>

Method 2 (seems like it may potentially cause problems for more complex popups): wrap the page inside the popup in a view:

<f7-popup>
    <f7-view>
        <f7-page>
            ...
        </f7-page>
    </f7-view>
</f7-popup>