[Solved] Virtual List not updating with Vue

Questions
1

Hi,

I’m using Framework7 v2 with Framework7-vue v2. I have a virtual list, which contains an icon to check in an entry. After clicking that icon, the saved data in the items property of the virtual list is updated correctly, but the icon doesn’t update.

Here’s my code:

<template>
    <f7-page>
        <f7-list
            virtual-list
            media-lst
            :virtual-list-params="{ items: Tickets, height: 52, renderExternal: renderExternal }"
        >
            <ul>
                <f7-list-item :id="item.ticket_id"
                    v-for="(item, index) in vlData.items"
                    :key="index"
                    :style="`top: ${vlData.topPosition}px`"
                    :title="item.name"
                    :after="item.nr"
                    :checked="item.checkedIn"
                    
                >
                <div slot="content" @click="checkin(item, index)">
                    <i class="far fa-check-square" v-if="item.checkedIn"/>
                    <i class="far fa-square" v-else/>
                </div>
                </f7-list-item>
            </ul>
        </f7-list>
    </f7-page>
</template>

<script>
    export default {
        name: 'Teilnehmerliste',
        data() {
            return {
                vlData: {},
                vl: {}, 
                Tickets: [
                            {
                                "checkedIn": false,
                                "nr": "123451",
                                "name": "ABC"
                            },
                            {
                                "checkedIn": false,
                                "nr": "123452",
                                "name": "DEF"
                            },
                            {
                                "checkedIn": false,
                                "nr": "123453",
                                "name": "GHI"
                            }
                    ]
            };
        },
        methods: {
            renderExternal(vl, Tickets) {
                this.vlData = Tickets;
            },
            checkin(item, index) {
                const self = this;
                const app = this.$f7;
                app.dialog.confirm('Checkin ' + item.name , "Checkin", function () {
                    item.checkedIn = true;
                    let vl = self.$f7.virtualList.get();
                    vl.domCache = {};
                    vl.update();
                }, function () {
                    item.checkedIn = false;
                });            
            }
        }
    }
</script>

Any idea, what I’m doing wrong?

2

Try to call replaceAllItems VL’s method to update, should work:

app.dialog.confirm('Checkin ' + item.name , "Checkin", function () {
    item.checkedIn = true;
    let vl = self.$f7.virtualList.get();
    vl.replaceAllItems(self.Tickets);
}, function () {
    item.checkedIn = false;
    vl.replaceAllItems(self.Tickets);
});
3

Thank you.

I already tried that, but there is no change in the behaviour. The icon is still the same as before.

4

In your checkin method, try to:

console.log(self.Tickets[index] === item);

Is it true?

5

If not, then instead of:

try

Tickets[index].checkedIn = true;
6

“Unfortunatly” it is true. Nevertheless I tried to set the checkedIn-Property as you mentioned, but still noch change.

7

Ok, then i need to check the JSFiddle or live example. Issue could be somewhere else

8

This one is solved. The problem was FontAwesome.js, which broke Vue. Just switched from the js-Version to the css-Version and everything works fine.

Thank you very much nolimits4web!