VueJS样式类在组件刷新后未应用于元素

Question

我已经用分页编码了VueJS组件列表。在前后返回之后，某些项目没有正确的样式，应根据指定的类进行分配。 我试过用：

this.$forceUpdate()

然而，这没有帮助。 获取数据的完整功能代码是：

<template>
    <div>
        <div class="h2">{{title}}</div>
        <ul class="demo-list-icon mdl-list">
            <li class="mdl-list__item mdl-list__item--two-line" v-for="item in items">
                <span class="mdl-list__item-primary-content">
                    <i class="material-icons mdl-list__item-icon" v-if="item.item_media.aggregate_type === 'image'">image</i>
                    <i class="material-icons mdl-list__item-icon" v-else-if="item.item_media.aggregate_type === 'audio'">audiotrack</i>
                    <i class="material-icons mdl-list__item-icon" v-else-if="item.item_media.aggregate_type === 'video'">movie</i>
                    <i class="material-icons mdl-list__item-icon" v-else-if="item.item_media.aggregate_type === 'document' || item.item_media.aggregate_type === 'pdf' ">description</i>
                    <i class="material-icons mdl-list__item-icon" v-else>insert_drive_file</i>
                    <span>
                        <a :href="getUrl(item)">{{ getFileName(item) }}</a>
                    </span>
                    <span class="mdl-list__item-sub-title">
                        <span class="mdl-chip" style="height: 14px; font-size: 10px!important;line-height: 13px;" v-for="tag in item.tags">
                            <span class="mdl-chip__text" style="font-size: 11px">{{tag.name.en}}</span>
                        </span>
                    </span>
                </span>
                <span class="mdl-list__item-secondary-content">
                    <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" :for="'to-mediaplayer-'+item.id">
                        <input type="checkbox" :id="'to-mediaplayer-'+item.id" class="mdl-switch__input">
                        <span class="mdl-switch__label"></span>
                    </label>
                </span>
            </li>
        </ul>
        <div class="pagination pull-right" v-if="[pagination.last_page !== '1']">
            <button class="btn btn-default" @click="fetchItems(pagination.prev_page_url)"
                    :disabled="!pagination.prev_page_url">
                Previous
            </button>
            <span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
            <button class="btn btn-default" @click="fetchItems(pagination.next_page_url)"
                    :disabled="!pagination.next_page_url">Next
            </button>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            title: {
                type: String,
                required: true
            },
        },
        data: () => ({
            items: [],
            pagination: {}
        }),
        mounted: function () {
            this.fetchItems()
        },
        computed: {},
        methods: {
            fetchItems: function (page_url) {
                let vm = this;
                let baseUrl = window.location.origin;
                page_url = page_url || baseUrl + '/api/items';

                axios.get(page_url)
                    .then(response => {
                        console.log('Attempting to get: ' + page_url);
                        // JSON responses are automatically parsed.
                        this.makePagination(response.data);
                        this.items = response.data.data;
                    })
                    .catch(e => {
                        alert(e)
                    });
                this.$nextTick(function () {
                    // DOM is now updated
                    // `this` is bound to the current instance
                    console.log('Running force update ...');
                    this.$forceUpdate();
                })
            },
            makePagination: function(data){
                this.pagination = {
                    current_page: data.current_page,
                    last_page: data.last_page,
                    next_page_url: data.next_page_url,
                    prev_page_url: data.prev_page_url
                }
            },
            getUrl: function(item) {
                let baseUrl = window.location.origin;
                let directory = item.item_media.directory === '' ? '' :  item.item_media.directory + '/'
                return encodeURI(baseUrl + '/storage/' + directory + item.item_media.filename + '.' + item.item_media.extension)
            },
            getFileName: function(item) {
                return item.name.en
            },
        }
    }
</script>

正如您所看到的，当我使用分页按钮时，我使用的Material design elements基本上没有加载。 任何帮助深表感谢。谢谢！