It is possible to call framework 7 app methods inside a jquery event handler inside a component.
ERROR
VM2339:22 Uncaught TypeError: Cannot read property 'toast' of undefined
at HTMLInputElement.<anonymous> (<anonymous>:22:15)
at HTMLInputElement.dispatch (jquery.min.js:2)
at HTMLInputElement.v.handle (jquery.min.js:2)
COMPONENT PAGE
</template>
<script>
return {
mounted() {
const self = this;
const app = self.$f7;
// format card number
$('#card-number').payform('formatCardNumber');
$("#card-number").on('keyup', function () {
const self = this;
const app = self.$f7;
validateCard = $.payform.validateCardNumber($(this).val());
console.log( validateCard );
// validate the credit card
if ( validateCard == false) {
// return a f7 toast error.
app.toast.create({
text: 'I\'m on center',
position: 'center',
closeTimeout: 2000,
});
}
});