F7-list-group Programmatical Alphabetical List With Framework7/Vue

Questions
1

Is there a simple syntax to create a list-group based on a json object to sort alphabetically?:

For example, this is for one group starting with A - but can I make the list group dynamic with a key?

        <f7-list>

            <f7-list-group>
                <f7-list-item title="A" group-title></f7-list-item>
                <f7-list-item v-bind:header="item.strName" v-for="item in this.$f7.data.myJsonObj" v-if="item.strName.startsWith('A')">
                </f7-list-item>
            </f7-list-group>

</f7-list>

I’ve since worked this out, by using LoDash I’ve been able to sort the json into a GroupBy with the following (key being the name of the group of items in the json):

        <f7-list-group v-for="(myitems, key) in this.$f7.data.mygroupeditemsbyalphabet">
            <f7-list-item v-bind:title="key" group-title></f7-list-item>
            <f7-list-item v-bind:header="item.strName" v-for="item in myitems">
            </f7-list-item>
        </f7-list-group>
2

Yes, you need first to create Object or array of required format with keys and then using v-for do the thing. You did it correctly

1 Like