VueJS分页组件刷新后样式类未生效，$forceUpdate无效求助

你遇到的是Material Design Lite（MDL）的典型问题：它默认只会在页面首次加载时初始化DOM中的组件，分页后动态新增的元素不会自动触发样式和交互初始化，this.$forceUpdate() 之所以没用，是因为它仅强制Vue重新渲染视图，并不会触发MDL的组件升级逻辑。

解决方案 #

MDL提供了全局的 componentHandler 对象，它的 upgradeElements 方法可以手动初始化指定DOM元素。你需要在Vue完成新DOM渲染后，调用这个方法处理分页后新增的MDL组件。

修改你的 fetchItems 方法，把MDL初始化逻辑放在 $nextTick 中（确保Vue已经完成DOM更新）：

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);
      this.makePagination(response.data);
      this.items = response.data.data;
      // 在DOM更新完成后初始化MDL组件
      this.$nextTick(() => {
        // 选择所有需要升级的MDL元素（switch、chip等）
        const mdlElements = document.querySelectorAll('.mdl-switch, .mdl-chip');
        componentHandler.upgradeElements(mdlElements);
        // 也可以直接升级整个列表容器，覆盖所有未初始化的MDL组件
        // const listContainer = document.querySelector('.demo-list-icon');
        // componentHandler.upgradeElements(listContainer);
      });
    })
    .catch(e => {
      alert(e)
    });
}

为什么这个方法有效？ #

• this.$nextTick 确保Vue已经将新的 items 渲染到DOM中，此时分页新增的 .mdl-switch、.mdl-chip 等元素已经存在于页面。
• componentHandler.upgradeElements 会遍历目标元素，为它们添加MDL所需的样式类和交互事件，让组件正常工作。

额外提示 #

• 如果你不确定要选择哪些元素，直接升级整个列表容器（比如 .demo-list-icon）会更省心，它会自动处理容器内所有未初始化的MDL组件。
• 确保页面已正确加载MDL的JS文件，componentHandler 是全局可用的（MDL加载后会自动注册这个全局对象）。

内容的提问来源于stack exchange，提问作者Aleksandr Popov