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

Question

我在我的 Nuxt 项目中工作，该项目使用 Vuetify 作为框架，直到我注意到一些奇怪的事情。以下代码是我的一个组件的代码：

<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" 来显示项目列表。因为我想禁用其他页面中列表的活动样式，所以我尝试用我自己的代码添加和删除我想要的 class。执行此任务的代码位于 activeClass() 方法中。在那里，我将 class 添加到“mainElem”元素，该元素是我列表中 "a" 标签的父元素。我在添加 class 之前和之后安慰输出，它显示添加了 class：

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

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

Answer 1

你可以使用 DOM 选择器，同时 Vue 是面向状态的，有些它不像 VanillaJS 或 jQuery 在这件事上比你不不需要以节点为目标并对其进行一些更改以获得反应性数据。

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

所以是的 querySelector 不是最强大的，不推荐并且主要与使用命令式代码的老式方式相关联，就像 jQuery 在那个时代所做的那样。

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

Why ''classList.add()'' method does not work in my Vuetify app?

javascript

vue.js

nuxt.js

vuetify.js