Using jquery plugin with vuejs, without webpack?

Question

I am having trouble figuring out how to use a jquery plugin within a vue component. I am not using webkit, browserify, or ES2016. Is there still a way for me to be able to use a plugin and target an element within the template tag? Google has yielded no results that were helpful.. the plugin in question is jquery.payment for stripe

Bill Criswell · Accepted Answer · 2016-09-23 19:16:06Z

1

You can use the plugin in the ready event of your component. In short it would look something like this:

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

Here's how I'd approach it if I had no other option. I did not test it but it should be relatively close:

<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)
      }
    }
  })

answered Sep 23, 2016 at 19:16

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using jquery plugin with vuejs, without webpack?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related