將hasClass與vue.js一起使用

Question

我知道我的這個設置並不理想，但我需要檢查輸入元素的類。 我剛開始在一個新項目中使用Vue.js，但是我們有一個必須使用jQuery的表單驗證庫。

我正在使用的驗證庫如果它不符合某些驗證要求，則會為輸入添加一個類。

如果我使用的是jQuery，我可以使用hasClass來檢查輸入元素是否具有特定的類。

在Vue中，我不確定如何檢查元素是否有類？

以下是我想要實現的示例方法：

      methods: {
        nextStep: function() {
          const element = this.$el.querySelector("#conversation__tram-1 input");
          if (element has the class of is-valid) {
            Do something
          }

        },
      },

如您所見，我想檢查輸入字段是否具有is-valid類。 您能想到我可以用Vue.js做到這一點的任何方式嗎？ 謝謝。

Answer 1

您可以使用元素的classList屬性 ：

if (element.classList.contains('is-valid')) {
  // Do something
}

Answer 2

大多數本機vue.js函數涉及操縱DOM后面的數據，而不是DOM本身。

有多種方法可以實現這一目標，
您可以使用Vue類綁定，這是雙向的。 因此，一旦初始化綁定，您就可以構建一個API來公開它。

你試過這個嗎？

if (this.$els.elementNameHere.className.match(/\bmyclass\b/)) {
    //
}

Answer 3

如果已經涉及jQuery，只需按照你已經知道的方式使用它的hasClass 。

    nextStep: function() {
      const element = this.$el.querySelector("#conversation__tram-1 input");
      if ($(element).hasClass('is-valid')) {
        Do something
      }
    },

Vue沒有提供任何特殊的DOM操作例程，因為在Vue中，通常不應該操縱DOM。 有一些精心設計的例外，但這不是真的。 :)混合jQuery和Vue的關鍵是你必須小心地將jQuery控件與Vue控件分開，這樣他們就不會互相踩到腳趾。 只要您不希望Vue更新它，只需簡單地讀取DOM就沒有太大的危害。