时间戳

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

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

问题描述

我在使用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”标签的父元素。我在添加类之前和之后对输出进行了控制台，它显示添加了类：

enter image description here

But the "elements tab (or inspector tab in Firefox)" does not show class in the element:

enter image description here

To insure that my code is correct and the Vuetify does not allow the code to do its task, I added another "div" (div with id="myElem") and add class to that "div" in another method, and it works correctly. My question here is that why we could not add class to "Vuetify" items in v-list with "classList.add()" method and how to resolve that?

标签： javascriptvue.jsnuxt.jsvuetify.js

解决方案

You can use DOM selectors, meanwhile Vue is state oriented, some it's not working as VanillaJS or jQuery in the matter than you don't need to target a node and make some changes on it to have reactive data.

If you can use a state to fix your issue, just do it like this.
Otherwise use $refs to target a specific element in your page.
It will be more Vue-y, will not have weird behavior with it being an SPA and will follow the guidelines of the documentation. Vue3 do also have reactive selectors.

So yeah querySelector is not the most powerful, not recommended and is mainly tied to the old fashioned way of using imperative code like jQuery did back in it's time.

推荐阅读