vuetify expansion panel does not update with data change

Question

I have a bunch of expansion panels that are rendered from a list. This list has 60+ items in it, so I have set up a pagination to display 5 results at a time. The problem is that the expansion panels do not correctly update with the new lists. I Know that I am returning a new list.

        {{this.viewFilteredTools}}
        <success-factors v-for="(x,index) in this.viewFilteredTools" :key="index" :factor="x" :tool="tool" />
        {{x}}
    </v-expansion-panels>
<v-pagination
        v-model="page"
        :length="this.paginationLength/5"></v-pagination>

This is just holding the expansion panels which are coming in through <success-factors/>.

<script>
import SuccessFactors from './SuccessFactors.vue';
export default {
    components: { SuccessFactors },
    props:{
        tool:{
            type: Object,
            required: false,
        }
    },
    data() {
        return {
            page:1,
            paginationLength: 0,
            factors: {},
            factorsList: [],
            filterByItems: [
                {text:'A to Z (Complete Reviews First)',value:'ascending'},
                {text:'Z to A (Complete Reviews First)',value:'descending'},
                {text:'A to Z (all)',value:'allAscending'},
                {text:'Z to A (all)',value:'allDescending'}
            ],
            filterValue: {text:'Z to A (all)',value:'allDescending'},
            viewFilteredTools:[]

        };
    },
    mounted() {
        console.log('something happens here')
        this.factorsList = this.tool.factors;
        this.paginateResults(1,this.factorsList)
        this.paginationLength = this.factorsList.length
        

    },
    watch: {
        page(oldPage){
            this.paginateResults(oldPage,this.factorsList);
        }
    },
    // computed:
    async fetch() {
        const { $content} = this.$nuxt.context;
        this.factors = (await $content(this.tool['factors']).fetch());
        this.factorsList = this.tool.factors;
    },
    methods: {
        sortList(lstValue) {
            console.log(this.tool.factors);
            let sortFactors = this.tool.factors;
            sortFactors = sortFactors.sort((a,b) => {
                if(a<b){
                    return -1;
                }
                if(a>b){
                    return 1;
                }
                return 0;
            })
            this.factors = sortFactors;


        },
        paginateResults(page,results){
            console.log(results)
            const startCount = (page-1)*5;
            const endCount = startCount + 5;
            this.startCount = startCount+1;
            this.endCount = endCount;
            console.log(results.slice(startCount,endCount))
            this.viewFilteredTools =  results.slice(startCount,endCount);
        }
    }
};
</script>

this.viewFilteredTools is created from this.factorsList inside the mount lifecycle. Then any time a new page is chosen it is updated from the method sortList(). I can see the viewFilteredTools does change with every page change due to printing it out above the <success-factors>. However, the <success-factors> does not take the data from the updated lists.

Answer 1

Your best bet is to use a computed property. Vue knows when a computed property is updated & would re-render when that property updates.