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

Question

我在使用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”项目以及如何解决这个问题？

Answer 1

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

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

所以是的， querySelector不是最强大的，不推荐使用，它主要与使用命令式代码的老式方式（如当时的 jQuery）联系在一起。