SmartSelect default value on page Mounted with vue doen't work

Questions
1

Hello, I have an issue with the smart select preview update when the value is pre-set on page load.

Here’s the simplified source code of my page.

<template>
    <f7-page name="Test" @page:beforeout="beforeout()">

        <f7-block-title>Select a choice</f7-block-title>
        <div class="list list-strong-ios list-outline-ios list-dividers-ios">
            <ul>
                <li>
                    <a class="item-link smart-select smart-select-init" id="smart-select-test">
                        <select name="select" v-model="form.data.select">
                            <option value="A">A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
                        </select>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title">Select a choice</div>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        
        <f7-block>
            <f7-button fill round @click="saveData" preloader :loading="isLoading">Save</f7-button>
        </f7-block>
    </f7-page>
</template>

<script>
import { f7, f7ready } from 'framework7-vue'

export default {
    name: 'Test',
    props: {
        f7route: Object,
        f7router: Object
    },
    components: {
    },
    data() {
        return {
            form: {
                "data": {
                    "select": ""
                }
            }, 
            isLoading: false,
            sm: undefined
        }
    },
    methods: {
        async saveData() {
            try {
                this.isLoading = true
            }
            catch (e) {
                
                console.error(e)
            }
            finally {
                this.isLoading = false
            }
        },

        beforeout() {
            f7.smartSelect.destroy('#smart-select-test')
            this.sm = {}
        }
    },
    
    mounted() {
        this.form.select.sex = "A" // or B or C | Debug value
        
        f7ready((f7) => {
            
            this.sm = f7.smartSelect.create({el:'#smart-select-test'})
            
            this.sm.setValue('A') // or B or C | Debug value

        })
    },
}

</script>

The smart select has 3 possible choices: A, B, and C.

Upon page load, inside mounted(), I set a default value for the smart select (using the variable associated with v-model), and then I use this.sm.setValue to set the value to be displayed in the preview.

Everything works perfectly the first time I enter the page, but if I exit and re-enter, this process doesn’t work, and nothing is displayed in the preview (though the value is correctly selected).

I also tried destroying the smart-select object when leaving the page, but it doesn’t change anything. What am I doing wrong?

I’m using the latest version of fw7 + vue.

2

@nolimits4web I’ve created a sandbox with a working demo: https://codesandbox.io/p/sandbox/keen-dawn-kcgfc6

Could you please check the issue?
Just enter inside the Add Page, and then go back and enter again

3

try to use app.smartselect.get("#… ") instead of create(). Create(el) due to docs creates a copy of el. At least it works for me.

4

@Ranyee I’ve tryied, but get('#') doesn’t find my smartSelect, I don’t know why.
The code is inside f7ready so it should work

5

Well, i use it much later - in the PageAfterIn event and i have f7Core.