Hi,
I am trying to create a custom directive within my framework7 vue app. I am using the latest version.
With the framework7 cli i created a new app and try to add a local registered directive to the home.vue page. I get no error but the directive is not working. If I add this directive to a non framework7 project it does work. What am I doing wrong?
<template>
<f7-page name="home">
<!-- Top Navbar -->
<f7-navbar large :sliding="false">
<f7-nav-left>
<f7-link icon-ios="f7:menu" icon-aurora="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
</f7-nav-left>
<f7-nav-title sliding>test</f7-nav-title>
<f7-nav-right>
<f7-link icon-ios="f7:menu" icon-aurora="f7:menu" icon-md="material:menu" panel-open="right"></f7-link>
</f7-nav-right>
<f7-nav-title-large>test</f7-nav-title-large>
</f7-navbar>
<!-- Page content-->
<f7-block strong>
<p v-test>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>
</f7-block>
<f7-block-title>Navigation</f7-block-title>
<f7-list>
<f7-list-item link="/about/" title="About"></f7-list-item>
<f7-list-item link="/form/" title="Form"></f7-list-item>
</f7-list>
<f7-block-title>Modals</f7-block-title>
<f7-block strong>
<f7-row>
<f7-col width="50">
<f7-button fill raised popup-open="#my-popup">Popup</f7-button>
</f7-col>
<f7-col width="50">
<f7-button fill raised login-screen-open="#my-login-screen">Login Screen</f7-button>
</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Panels</f7-block-title>
<f7-block strong>
<f7-row>
<f7-col width="50">
<f7-button fill raised panel-open="left">Left Panel</f7-button>
</f7-col>
<f7-col width="50">
<f7-button fill raised panel-open="right">Right Panel</f7-button>
</f7-col>
</f7-row>
</f7-block>
<f7-list>
<f7-list-item
title="Dynamic (Component) Route"
link="/dynamic-route/blog/45/post/125/?foo=bar#about"
></f7-list-item>
<f7-list-item
title="Default Route (404)"
link="/load-something-that-doesnt-exist/"
></f7-list-item>
<f7-list-item
title="Request Data & Load"
link="/request-and-load/user/123456/"
></f7-list-item>
</f7-list>
</f7-page>
</template>
<script>
export default {
setup() {
},
data: function(){
return {
}
},
directives: {
test: {
// directive definition
inserted: function (el) {
console.log('testing')
}
}
}
};
</script>