主页 / 问题 / 1135726
Accepted
dmitriy
Asked:2020-06-03 19:13:01 +0000 UTC2020-06-03 19:13:01 +0000 UTC

如何使用 refs 从所有元素中删除类

  • 772

每个块都有一个按钮，单击时，粘性类被添加到该块中，当我单击另一个块中的按钮时，我想从所有块中完全删除粘性类。我通过 ref 添加一个类，但问题是当我想删除所有元素时，什么都没有发生，可能是什么问题？

<div v-for="(item, index) in items" :key="index" :ref="`block-${index}`">
 <button @click="removeClass(index)>click</button>
</div>

methods: {
 removeClass(index) {
   this.items.forEach((item, ind) => {
      this.$refs[`block-${ind}`].classList.remove('sticky');
   });
   this.$refs[`block-${index}`][0].classList.add('sticky');
 }
}
vue.js

1 个回答

  1. Best Answer

    如果我正确理解了您正在解决的问题，那么您就没有正确的方法来解决它。以下是单击时更改元素类的示例

    const app = new Vue({
  el: "#app",
  data() {
    return {
      activeIndex: 0,
    }
  },
});
    #app {
  width: 500px;
  border: 1px solid;
}

.block {
  height: 40px;
  margin: 10px 0;
  cursor: pointer;
  border: 1px solid;
}

.block.active {
  background-color: red;
}
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<div id="app">
  <div v-for="index in 5" class="block" :class="{active: activeIndex === index}" :key="index" @click="activeIndex = index">Click</div>
</div>

    • 0

相关问题