为什么我的Vuetify应用中classList.add()方法对v-list元素不生效？

• 核心原因是你手动操作原生DOM添加类名的行为，没有被Vuetify组件的响应式逻辑记录。v-list-item-group属于Vuetify封装的组件，内部会维护自身的虚拟DOM结构，只要组件触发重渲染（比如点击交互、内部状态更新），就会用虚拟DOM的快照覆盖真实DOM，你手动通过classList.add添加的类没有在虚拟DOM中声明，自然会被冲刷掉。你在控制台同步打印时类名还没被冲刷，后续组件异步重渲染后类名就被移除，所以会出现控制台打印有类、元素面板看不到的矛盾现象。
• 你新增的myElem是普通原生HTML元素，没有被组件的虚拟DOM更新逻辑管理，所以手动操作类名可以正常保留。

不要手动操作DOM，直接用v-list-item-group原生提供的激活项绑定能力实现需求，这也是Vue框架下的标准实现方案：

1. 调整template代码 #

给v-list-item-group绑定v-model跟踪当前激活项，再通过动态类名绑定给激活项添加自定义类，不需要额外写手动增删类的逻辑：

<template>
<section>
    <v-list>
        <!-- 绑定v-model跟踪激活项索引 -->
        <v-list-item-group v-model="activeIndex">
            <v-list-item
            v-for="(item, i) in subjects"
            :key="i"
            :class="{'classActiveRoute': activeIndex === i}"
            >
            <nuxt-link to="#">
                {{ item }}
            </nuxt-link>
            </v-list-item>
        </v-list-item-group>
    </v-list>

    <div id="myElem" @click="otherFunc"> 
      some text
    </div>
</section>
</template>

2. 调整script代码 #

在data中新增激活项跟踪变量，删除原来手动操作DOM的activeClass方法：

<script>
export default {
    data () {
      return {
        subjects: ["تاریخی", "خلاقیت", "روان شناسی", "زندگی نامه", "مذهبی", "فیزیک", "ریاضیات"],
        activeIndex: 0 // 初始激活第一项，不需要默认激活可设为null
        }
    },
    methods: {
      otherFunc: function(eve2) {
        eve2.target.classList.add("classActiveRoute")
      }
    }
}
</script>

3. 调整样式（可选） #

如果你用的是scoped样式，因为v-list-item是Vuetify子组件，需要用深度选择器让自定义类生效：

<style scoped>
/* 深度选择器写法，Vue2用::v-deep，Vue3用:deep() */
::v-deep .classActiveRoute {
  border: 2px solid red;
}

.theme--dark.v-list-item--active:hover::before {
 opacity: 0.08;
}

.theme--dark.v-list-item--active::before {
  opacity: 0;
}

#myElem {
  margin-top: 25px;
  background-color: #0f45af;
  min-height: 145px;
}
</style>

内容的提问来源于stack exchange，提问作者hamid-davodi