2016-09-23 3 views
1

Ich habe Probleme herauszufinden, wie man ein jquery-Plugin in einer vue-Komponente verwendet. Ich verwende nicht webkit, browserify oder ES2016. Gibt es noch eine Möglichkeit für mich, ein Plugin zu verwenden und ein Element innerhalb des Template-Tags zu targetieren? Google hat keine Ergebnisse erbracht, die hilfreich waren. Das fragliche Plugin ist jquery.payment for stripeVerwenden von Jquery-Plugin mit Vuejs, ohne Webpack?

Antwort

1

Sie können das Plugin im ready Event Ihrer Komponente verwenden. Kurz gesagt würde es ungefähr so ​​aussehen:

So würde ich mich nähern, wenn ich keine andere Möglichkeit hätte. Ich habe es nicht getestet, aber es sollte relativ nah sein:

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

Wenn Sie VueJS 2 verwenden, verwenden Sie 'mounted' anstelle von' ready'. –