type:any

Vue.jsでmounted後にVue用でないプラグインに足されたclassは、:classの動的なクラス付与によって消される

{ category: "Front-end" }

多分ご存知の方にとっては当たり前の挙動だと思うのですが、mounted後にrefなどで取得したDOM要素にclassList.addなどで付与したclassは、:classの動的なclass付与によって消えてしまうようです。

Viteのサンプルコードで試す
<script setup>
import { ref, onMounted } from 'vue'

const sample = ref(null)
const count = ref(0)

onMounted(() => {
  sample.value.classList.add('mounted')
})

</script>

<template>
  <div
    class="sample"
    :class="{ sample_override: count >= 1 }"
    ref="sample"
  >
    sample
  </div>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

</template>  

普段は困ることはないと思うのですが、Vue用以外のプラグインによって足されたclassが消えてしまうのは問題になったりします。

Overlay Scrollbarsというプラグインを使っており、それの足すos-○○というclassが消えてしまうので困っていましたが、もし簡易的に解決したいのであればos-○○を予め静的なclassとして持たせるのが良さそうだと思いました。そのクラスがプラグインによってつけ外しされるものならなかなか解決方法は無いと思いますが…

結論としては、UI系はVue用のものを使うというのが良さそうです。