Add dynamic onClick in action sheet

Hello!

I get error “Uncaught TypeError: n.onClick is not a function” when trying to set a dynamic function onClick. How do I set the onClick function for dynamic object buttons&?

My code:

<template>
    <div class="page">
        <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="title">Главная</div>
                <div class="right">
                    <a href="#" class="link icon-only popover-open" data-popover=".popover-locals">
                        <i class="icon f7-icons">more_vertical_fill</i>
                    </a>
                </div>
            </div>
        </div>
        <div class="page-content">
            <a href="/item/">Item</a><br>
            <a href="/not_auth/">Not auth</a>
        </div>
        <div class="popover popover-locals">
            <div class="popover-inner">
                <div class="list">
                    <ul>
                        <li>
                            <a class="list-button item-link popover-close" href="#" @click="selectLanguage">Изменить язык</a>
                        </li>
                        <li>
                            <a class="list-button item-link popover-close" href="#" @click="selectCurrency">Изменить валюту</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

return {
        methods: {
            switchCurrency: function () {
               var $ = this.$;
               var self = this;
               console.log('code');
            },
            
            selectCurrency: function () {
                var $ = this.$;
                var app = this.$app;
                var self = this;
                app.preloader.show();
                app.request({
                    url: app.data.api.site + '/index.php?route=tazboapi/locals/list_currencies',
                    crossDomain: true,
                    method: "GET",
                    success: function (successCurrencies) {
                        app.preloader.hide();
                        var currenciesObj = JSON.parse(successCurrencies);
                        var currenciesList = [{text:"Выбор валюты", label: true}];
                        for (var i = 0; i < currenciesObj.currencies.length; i++) {
                            curObject = {text:currenciesObj.currencies[i].title, onClick:"function () {self.switchCurrency()}"};
                            currenciesList.push(curObject);
                        }
                        currenciesList.push({text:"Закрыть", color:'red', close:true});
                        // Select language
                        var currencies = app.actions.create({
                            buttons: currenciesList
                        });
                        currencies.open();
                    },
                    error: function (errorCurrencies) {
                        app.preloader.hide();
                        var dialog = app.dialog.create({
                            title: 'Ошибка',
                            text: 'Не удалось получить данные! Попробуйте снова или обратитесь в поддержку!',
                            buttons: [
                                {
                                    text: 'OK',
                                }
                            ],
                        }).open();
                    },
                });
            },
        }
    }

hi, why do you wrap the onClick function in quotes? --> " <—

onClick:"function () {self.switchCurrency()}"}

es the error says, f7 expects a function and you send a string, by wrapping with quotes…
try by removeing them.

onClick: function () { self.switchCurrency() } }
1 Like

Hell, I got too tired and missed this simple mistake.
Thank you!

1 Like