why i can’t call method helloWorld ?
Uncaught TypeError: Cannot read property ‘helloWorld’ of undefined
at HTMLAnchorElement.onclick ((index):1)
onclick @ (index):1
my app.js
import $$ from 'dom7';
import Framework7 from 'framework7/framework7.esm.bundle.js';
// Import F7 Styles
import 'framework7/css/framework7.bundle.css';
// Import Icons and App Custom Styles
import '../css/icons.css';
import '../css/app.css';
// Import Routes
import routes from './routes.js';
// Import main app component
import App from '../app.f7.html';
var app = new Framework7({
root: '#app', // App root element
component: App, // App main component
name: 'apprefadmin', // App name
theme: 'auto', // Automatic theme detection
// App root data
data: function () {
return {
// 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.'
},
]
};
},
methods: {
helloWorld: function () {
app.dialog.alert('Hello World!');
},
},
// App routes
routes: routes,
});
and my routes.js
import HomePage from '../pages/home.f7.html';
import AboutPage from '../pages/about.f7.html';
import FormPage from '../pages/form.f7.html';
import CatalogPage from '../pages/catalog.f7.html';
import ProductPage from '../pages/product.f7.html';
import SettingsPage from '../pages/settings.f7.html';
import Ouvidoria from '../pages/ouvidoria.f7.html';
import DynamicRoutePage from '../pages/dynamic-route.f7.html';
import RequestAndLoad from '../pages/request-and-load.f7.html';
import NotFoundPage from '../pages/404.f7.html';
var routes = [
{
path: '/',
component: HomePage,
},
{
path: '/about/',
component: AboutPage,
},
{
path: '/form/',
component: FormPage,
},
{
path: '/ouvidoria/',
component: Ouvidoria,
},
{
path: '/catalog/',
component: CatalogPage,
},
{
path: '/product/:id/',
component: ProductPage,
},
{
path: '/settings/',
component: SettingsPage,
},
{
path: '/dynamic-route/blog/:blogId/post/:postId/',
component: DynamicRoutePage,
},
{
path: '/request-and-load/user/:userId/',
async: function (routeTo, routeFrom, resolve, reject) {
// Router instance
var router = this;
// App instance
var app = router.app;
// Show Preloader
app.preloader.show();
// User ID from request
var userId = routeTo.params.userId;
// Simulate Ajax Request
setTimeout(function () {
// We got user data from request
var user = {
firstName: 'Vladimir',
lastName: 'Kharlampidi',
about: 'Hello, i am creator of Framework7! Hope you like it!',
links: [
{
title: 'Framework7 Website',
url: 'http://framework7.io',
},
{
title: 'Framework7 Forum',
url: 'http://forum.framework7.io',
},
]
};
// Hide Preloader
app.preloader.hide();
// Resolve route to load page
resolve(
{
component: RequestAndLoad,
},
{
context: {
user: user,
}
}
);
}, 1000);
},
},
{
path: '(.*)',
component: NotFoundPage,
},
];
export default routes;
and my page component named ouvidoria
<template>
<div class="page" data-name="ouvidoria">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Ouvidoria</div>
</div>
</div>
<!-- Scrollable page content-->
<div class="page-content">
<div class="block block-strong">
<p>Controle os dados, configurações e páginas que são mostradas no aplicativo</p>
<a onclick="app.methods.helloWorld()">Teste </a>
</div>
</div>
</div>
</template>
<script>
export default {}
</script>