simply. I want to call the function with a button click
home page
<template>
<div class="page" data-name="home">
<!-- Top Navbar -->
<div class="navbar navbar-large">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons if-not-md">menu</i>
<i class="icon material-icons if-md">menu</i>
</a>
</div>
<div class="title sliding">My App</div>
<div class="right">
<a href="#" class="link icon-only panel-open" data-panel="right">
<i class="icon f7-icons if-not-md">menu</i>
<i class="icon material-icons if-md">menu</i>
</a>
</div>
<div class="title-large">
<div class="title-large-text">My App</div>
</div>
</div>
</div>
<!-- Scrollable page content-->
<div class="page-content">
<div class="col-50">
<a href="#" class="button" @click="booking">Show Gauge</a>
</div>
<div class="block block-strong">
<p>This is an example of tabs-layout application. The main point of such tabbed layout is that each tab contains independent view with its own routing and navigation.</p>
<p>Each tab/view may have different layout, different navbar type (dynamic, fixed or static) or without navbar like this tab.</p>
</div>
<div class="block-title">Navigation</div>
<div class="list">
<ul>
<li>
<a href="/about/" class="item-content item-link">
<div class="item-inner">
<div class="item-title">About</div>
</div>
</a>
</li>
<li>
<a href="/form/" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Form</div>
</div>
</a>
</li>
</ul>
</div>
<div class="block-title">Modals</div>
<div class="block block-strong">
<div class="row">
<div class="col-50">
<a href="#" class="button button-raised button-fill popup-open" data-popup="#my-popup">Popup</a>
</div>
<div class="col-50">
<a href="#" class="button button-raised button-fill login-screen-open" data-login-screen="#my-login-screen">Login Screen</a>
</div>
</div>
</div>
<div class="block-title">Panels</div>
<div class="block block-strong">
<div class="row">
<div class="col-50">
<a href="#" class="button button-raised button-fill panel-open" data-panel="left">Left Panel</a>
</div>
<div class="col-50">
<a href="#" class="button button-raised button-fill panel-open" data-panel="right">Right Panel</a>
</div>
</div>
</div>
<div class="list links-list">
<ul>
<li>
<a href="/dynamic-route/blog/45/post/125/?foo=bar#about">Dynamic (Component) Route</a>
</li>
<li>
<a href="/load-something-that-doesnt-exist/">Default Route (404)</a>
</li>
<li>
<a href="/request-and-load/user/123456/">Request Data & Load</a>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
</script>
this is my app js
var app = new Framework7({
root: '#app', // App root element
id: 'io.framework7.myapp', // App bundle ID
name: 'My App', // App name
theme: 'auto', // Automatic theme detection
// App root data
data: function () {
return {
user: {
firstName: 'John',
lastName: 'Doe',
},
// Demo products for Catalog section
products: [
{
id: '1',
title: 'Apple iPhone 8',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
},
{
id: '2',
title: 'Apple iPhone 8 Plus',
description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
},
{
id: '3',
title: 'Apple iPhone X',
description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
},
]
};
},
// App root methods
methods: {
helloWorld: function () {
app.dialog.alert('Hello World!');
},
booking: function () {
console.log("sfasfas");
},
},
// App routes
routes: routes,
// Input settings
input: {
scrollIntoViewOnFocus: Framework7.device.cordova && !Framework7.device.electron,
scrollIntoViewCentered: Framework7.device.cordova && !Framework7.device.electron,
},
// Cordova Statusbar settings
statusbar: {
iosOverlaysWebView: true,
androidOverlaysWebView: false,
},
on: {
init: function () {
var f7 = this;
if (f7.device.cordova) {
// Init cordova APIs (see cordova-app.js)
cordovaApp.init(f7);
}
},
},
});
// Login Screen Demo
$$('#my-login-screen .login-button').on('click', function () {
var username = $$('#my-login-screen [name="username"]').val();
var password = $$('#my-login-screen [name="password"]').val();
// Close login screen
app.loginScreen.close('#my-login-screen');
// Alert username and password
app.dialog.alert('Username: ' + username + '<br>Password: ' + password);
});