为什么 ''classList.add()'' 方法在我的 Vuetify 应用程序中不起作用？答案

【问题标题】：Why ''classList.add()'' method does not work in my Vuetify app?为什么 ''classList.add()'' 方法在我的 Vuetify 应用程序中不起作用？
【发布时间】：2021-11-08 12:12:33
【问题描述】：

我在使用 Vuetify 作为框架的 Nuxt 项目中工作，直到我发现一些奇怪的东西。以下代码是我的一个组件的代码：

<template>
<section>
    <v-list>
        <v-list-item-group>
            <v-list-item
            v-for="(item, i) in subjects"
            :key="i"
            @click="activeClass"
            >
            <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>

<script>
export default {
    data () {
      return {
        subjects: ["تاریخی", "خلاقیت", "روان شناسی", "زندگی نامه", "مذهبی", "فیزیک", "ریاضیات"],
        }
    },

    methods: {

        activeClass: function(eve) {
        let allItems = document.querySelectorAll(".v-list-item");
        allItems.forEach(element => {
          element.classList.remove("classActiveRoute");
        });

        let tagClick = eve.target.tagName.toLowerCase();
        let mainElem = eve.target;
        if(tagClick == "a") {
          mainElem = eve.target.parentElement;
        }
        console.log(mainElem.classList)

        mainElem.classList.add("classActiveRoute")
        console.log(mainElem.classList)
        
        
      },

      otherFunc: function(eve2) {
        eve2.target.classList.add("classActiveRoute")
      }

    } // end of methods
}
</script>

<style scoped>
.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>

在该代码中，我使用"Vuetify v-list" 显示项目列表。因为我想禁用其他页面中列表的活动样式，所以我尝试使用我自己的代码添加和删除我想要的类。执行此任务的代码在 activeClass() 方法中。在那里，我向“mainElem”元素添加了类，该元素是列表中 "a" 标记的父元素。我在添加类之前和之后对输出进行了控制台，它显示添加了类：

但是“元素选项卡（或 Firefox 中的检查器选项卡）”没有在元素中显示类：

为确保我的代码正确且 Vuetify 不允许代码执行其任务，我添加了另一个“div”（带有id="myElem" 的div）并将类添加到该“div " 在另一种方法中，它可以正常工作。我的问题是，为什么我们不能使用“classList.add()”方法将类添加到 v-list 中的“Vuetify”项目以及如何解决这个问题？

【问题讨论】：

我认为你必须将事件传递给函数@click="otherFunc($event)">
您不应使用任何querySelector，而应使用状态绑定附加/删除它。
@kissu “状态绑定”是什么意思？你的意思是像:class="{ active: isActive }" 这样的东西，但这适用于所有项目，而不仅仅是其中一个被点击的项目？我使用的“querySelectorAll”也用于删除类，我使用了 vue 本身的标签和事件
是的，像这样。如果你想要特定的元素，你可以在这里添加一个条件：stackoverflow.com/a/68741740/8816585
@kissu 感谢您的评论，它帮助我理解了一些事情并解决了我的问题，但是您能否简要解释一下为什么我的方法不起作用，或者给我一个链接来解释为什么会这样不工作？

标签： javascript vue.js nuxt.js vuetify.js

【解决方案1】：

您可以使用 DOM 选择器，同时 Vue 是面向状态的，在某些方面它不能像 VanillaJS 或 jQuery 那样工作，而不需要定位节点并对其进行一些更改以有反应性数据。

如果您可以使用状态来解决您的问题，就这样做吧。
否则，请使用 $refs 定位页面中的特定元素。
它将更加 Vue-y，作为 SPA 不会有奇怪的行为，并且会遵循文档的指导方针。 Vue3 也有响应式选择器。

所以是的，querySelector 不是最强大的，不推荐使用，并且主要与使用命令式代码的老式方式有关，例如 jQuery 在当时的使用方式。

【讨论】：