classListのadd,removeの結果が想定通りにならない

Question

classListのadd,removeの結果が想定通りにならない

仕様

• ある条件で、選択したタブ切り替えをキャンセルしたい

仕様技術（※今回の相談は素のjavascript操作ですが他に方針もあるかと思い一応記載・・・）

• Nuxt.js: 2.8.1
• Vue.js: 2.6.1
• ElemetUI: 2.10.1

実装方針

• ↑ある条件のとき、選択したタブに入っているis-activeクラスを削除し、現在のタブにis-activeクラスを追加する。
• （javascriptにて要素を取得しclassList.addやremoveを使いclass属性を追加・削除したい）

現状とソース

• 現状：タブ切り替えキャンセルしているつもりだが、タブが切り替わってしまう。

<el-tabs
    v-model="activeTab"
    :before-leave="checkEdited"
    @tab-click="handleTabClick"
  >
    <el-tab-pane
      v-for="(item, index) in tabs"
      :key="index"
      :name="index.toString()"
      :label="item.Name"
    ></el-tab-pane>
  </el-tabs>

async handleTabClick(selectedTab) {
    const editedItems = await this.getItemsEdited()
    if (editedItems.length !== 0) {
      // キャンセル処理
      // 選択したタブ
      const selectedTabId =
        ProspectEgh.PROSPECTCONSTSTR.tabIdPrefix + selectedTab.index
      const selectedtTabElement = document.getElementById(selectedTabId)
      // 現在のタブ
      const currentTabId =
        ProspectEgh.PROSPECTCONSTSTR.tabIdPrefix + this.currentTabIndex
      const currentTabElement = document.getElementById(currentTabId)
      // 選択したタブ確認
      console.log('selectedTabId')
      console.log(selectedTabId)
      console.log('selectedtTabElement')
      console.log(selectedtTabElement.classList)
      selectedtTabElement.classList.remove('is-active')
      console.log('selectedtTabElement')
      console.log(selectedtTabElement.classList)

      // 現在のタブ確認
      console.log('currentTabId')
      console.log(currentTabId)
      console.log('currentTabElement')
      console.log(currentTabElement.classList)
      currentTabElement.classList.add('is-active')
      console.log('currentTabElement')
      console.log(currentTabElement.classList)
    }
  }

確認したこと

• DevToolsのElementsでDOM操作（添付ソースの通りIDから要素取得しclass追加操作や削除操作）してみると思い通りに追加・削除できる

コンソール出力

• ある条件 + タブを選択したタイミングで選択したタブ（selectedTabElement）と現在のタブ（currentTabElement）をそれぞれclass操作前・class操作後でコンソール出力
• 添付画像を見ると、選択したタブ（selectedTabElement）にはDOMTokenList上はis-activeクラスはないが、value欄を見るとis-activeがある。
• 直後にclassList.remove('is-active')で削除操作をしても値は変わらず。。
• 同じように現在のタブ（currentTabElement）ではis-activeがDOMTokenList上にはあるがvalue欄ではない。操作後の値も変わらず。。

操作をするタイミングが悪いのかと思って調査中です。 ご指摘いただけると幸いです。

Answer 1

※今回の相談は素のjavascript操作ですが他に方針もあるかと思い一応記載・・・

Vue.jsで制御している中を普通のJavaScriptから動かしてはいけません。Vue.jsによる動作と手動での書き換えが干渉して、わけのわからない動作になってしまいます。

Comments

[maisumakun]

クラス設定もVue.jsから行ってください。

Answer 2

maisumakun さんもご指摘の通り、vueはDOMツリーを直接操作しているわけではなく仮想DOMをマウントしているので（この理解が間違っていたら申し訳ありません）、vueを用いないWeb開発のように直接DOMをいじると処理が干渉して意図した動作になりません。

クラスの値を動的に変えたいのであれば、対象のタグ内にv-bindで:class="hogehoge"のように書いて、hogehoge内にある条件を判定してクラス名を返す関数などを書けば行けるのではないでしょうか？

Answer 3

以下のコードお試しください

    checkEdited(item) {
  const editedItems =  this.getItemsEdited()
    if (editedItems.length !== 0) {
    let p = new Promise((resolve, reject) => {
        this.$confirm('離れますでしょうか', 'メッセージ', {
          confirmButtonText: 'yes',
          cancelButtonText: 'no',
          type: 'warning'
        }).then(() => {
          // todo
          resolve()
        }).catch(err => {
          // todo
          reject(err)
        })
      })
      return p
    }
}