[SOLVED] Call method in .on(click)

Hello!

How to properly call a method from a function:

methods: {
startPay: function () {
                var $ = this.$;
                var app = this.$app;
                var self = this;
                var nav = this.$router;

                console.log('start');
            },
},
    on: {
                pageInit: function(e, page) {
                    var $ = this.$;
                    var app = this.$app;
                    var self = this;
                    var nav = this.$router;
                    $$(document).on('click', "a.go-to-pay", function (e) {
                        ref = $$(this).attr('id');
                        console.log(ref);
                        self.startPay();
                    });
                },
            }

I’m trying to listen to click for dynamic data

1 Like

Instead of

    $$(document).on('click', "a.go-to-pay", function (e) {
    ref = $$(this).attr('id');
     console.log(ref);
     self.startPay();
    });

do

$$('.go-to-pay').on('click', function(e){
                        ref = $$(this).attr('id');
                        console.log(ref);
                        self.startPay();
});

However, I do want to mention your code is quite messy. I would recommend using and editing one of the provided templates.

1 Like

thank you!
i check your method, but it did not work for me.
How can I listen to clicks for dynamic links? here is my full code:

<template>
    <div class="page">
        <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left">
                    <a href="#" class="link back">
                        <i class="icon icon-back"></i>
                        <span class="if-not-md">Назад</span>
                    </a>
                </div>
                <div class="title">
                    Пополнение баланса
                </div>
            </div>
        </div>
        <div class="page-content">
            <div class="block-title">Текущий баланс: </div>
            <div class="list no-hairlines-md">
                <ul>
                    <li class="item-content item-input">
                        <div class="item-inner">
                            <div class="item-title item-label">Сумма пополнения в руб.</div>
                            <div class="item-input-wrap">
                                <input type="number" placeholder="1000" required validate pattern="[0-9]*" data-error-message="Только цифры!">
                                <span class="input-clear-button"></span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="block">
                <button class="col button button-large button-fill" @click="selectCreditCard">Продолжить</button>
            </div>
        </div>
        <div class="sheet-modal" id="creditCard" style="height:auto; --f7-sheet-bg-color: #fff;">
            <div class="sheet-modal-inner">
                <div class="page-content">
                    <div class="block-title">Выбор банковской карты:</div>
                    <div class="list">
                        <ul>
                            <li>
                                <a href="#" class="item-link item-content">
                                    <div class="item-media">
                                        <img src="img/pay/visa.png" width="40px">
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title">*5235</div>
                                        <div class="item-after">12/26</div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="item-link item-content">
                                    <div class="item-media">
                                        <img src="img/pay/mc.png" width="40px">
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title">*5235</div>
                                        <div class="item-after">12/26</div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="item-link item-content">
                                    <div class="item-media">
                                        <img src="img/pay/mir.png" width="40px">
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title">*5235</div>
                                        <div class="item-after">12/26</div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="item-link item-content">
                                    <div class="item-media">
                                        <img src="img/pay/default.png" width="40px">
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title">*5235</div>
                                        <div class="item-after">12/26</div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

return {
        data: function () {
            var app = this.$app;
            var userObj = JSON.parse(localStorage.getItem("user"));
            var header = {
                "alg": "HS256",
                "typ": "JWT"
            };
            var data = {
                "sessionId": userObj.sessionId
            };
            var secret = userObj.token;
            var stringifiedHeader = CryptoJS.enc.Utf8.parse(JSON.stringify(header));
            var encodedHeader = app.methods.base64url(stringifiedHeader);
            var stringifiedData = CryptoJS.enc.Utf8.parse(JSON.stringify(data));
            var encodedData = app.methods.base64url(stringifiedData);
            var signature = encodedHeader + "." + encodedData;
            signature = CryptoJS.HmacSHA256(signature, secret);
            signature = app.methods.base64url(signature);
            signToken = encodedHeader + "." + encodedData + "." + signature;
            return {
                signToken: signToken
            }
        },
        methods: {
            startPay: function () {
                var $ = this.$;
                var app = this.$app;
                var self = this;
                var nav = this.$router;

                console.log('start');
            },
            selectCreditCard: function () {
                var $ = this.$;
                var app = this.$app;
                var self = this;
                var nav = this.$router;

                var dynamicSheet = app.sheet.create({
                    content:
                        '<div class="sheet-modal" id="creditCard" style="height:auto; --f7-sheet-bg-color: #fff;">'+
                        '<div class="sheet-modal-inner">'+
                        '<div class="page-content">'+
                        '<div class="block-title">Выбор банковской карты:</div>'+
                        '<div class="list">'+
                        '<ul>'+
                        '<li>'+
                        '<a href="#" class="item-link item-content go-to-pay" id="20">'+
                        '<div class="item-media">'+
                        '<img src="img/pay/mc.png" width="40px">'+
                        '</div>'+
                        '<div class="item-inner">'+
                        '<div class="item-title">*5235</div>'+
                        '<div class="item-after">12/26</div>'+
                        '</div>'+
                        '</a>'+
                        '</li>'+
                        '</ul>'+
                        '</div>'+
                        '</div>'+
                        '</div>'+
                        '</div>'
                    ,
                    swipeToClose: true,
                    closeByBackdropClick: true,
                    backdrop: true,
                    on: {
                        opened: function () {
                            console.log('Sheet opened');
                        }
                    }
                });

                dynamicSheet.open();
            }
        },
        on: {
            pageInit: function(e, page) {
                var $ = this.$;
                var app = this.$app;
                var self = this;
                var nav = this.$router;
                $$('.go-to-pay').on('click', function(e){
                    ref = $$(this).attr('id');
                    console.log(ref);
                    self.startPay();
                });
            },
        }
    }

Assuming your dynamic sheet is opening, you have to do it in the sheets on open.

current you have [line 162]

                    on: {
                        opened: function () {
                            console.log('Sheet opened');
                        }
                    }

in there attach any on click events, example:

   on: {
         opened: function () {
         console.log('Sheet opened');
            $$('.go-to-pay').on('click', function(e){
                    alert("go to pay clicked!")
                    ref = $$(this).attr('id');
                    console.log(ref);
                    self.startPay();
                });
         }
    }
2 Likes

Thanks for the help!
This is a great solution and it works!

1 Like