javascript - webpackなしで、vuejsでjqueryプラグインを使用していますか?

Question

vue コンポーネント内で jquery プラグインを使用する方法がわかりません。webkit、browserify、または ES2016 を使用していません。プラグインを使用してテンプレート タグ内の要素をターゲットにする方法はまだありますか? Google は有益な結果をもたらしませんでした。問題のプラグインはストライプの jquery.payment です。

Answer 1

readyコンポーネントのイベントでプラグインを使用できます。要するに、次のようになります。

new Vue({
  el: '#app',
  ready: function() {
    jQuery('.find-thing').payment('formatCardNumber')
  }
})

他に選択肢がなかった場合のアプローチ方法を次に示します。私はそれをテストしませんでしたが、比較的近いはずです：

<div id="app">
  <input class="payment-input" v-model="creditCardNumber">
  <div v-if="!creditCardNumberValid">BAD CC</div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      creditCardNumber: '',
    },
    ready: function () {
      var paymentInput = this.$el.querySelector('.payment-input');
      jQuery(paymentInput).payment('formatCardNumber')
    },
    computed: {
      creditCardNumberValid: function () {
        return jQuery.payment.validateCardNumber(this.creditCardNumber)
      }
    }
  })