How to call function from router template? - vue.js

Question

I am doing very simple page with url's switching. In one of url I need to call #click methods. Here is my code:
const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const Faq = { template: '<p>Faq page</p>' }
const Book = { template: `
<div>
<button #click="foo()">test</button>
</div>
` }
const routes = [
{path: '/', component: Home},
{path: '/book', component: Book},
{path: '/faq', component: Faq}
]
const router = new VueRouter({
routes // short for `routes: routes`
})
new Vue({
el: '#app',
router,
data: {
},
methods:
{
foo()
{
console.log("ffffff");
}
}
})
But I am getting error: Property or method "foo" is not defined on the instance but referenced during render.

Answer 1

Because you're trying to define child component(book)'s method in parent component. Please just move methods property from parent component to child component.
Here's a sample.
const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const Faq = { template: '<p>Faq page</p>' }
const Book = { template: `
<div>
<button #click="foo()">test</button>
</div>
`
, methods: // <-- here you go
{
foo()
{
console.log("ffffff");
}
}}
const routes = [
{path: '/', component: Home},
{path: '/book', component: Book},
{path: '/faq', component: Faq}
]
const router = new VueRouter({
routes // short for `routes: routes`
})
Vue.use(VueRouter);
new Vue({
el: '#app',
router,
data: {
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.min.js"></script>
<div id="app">
<router-link :to="{ path: '/' }">Home</router-link>
<router-link :to="{ path: '/faq' }">FAQ</router-link>
<router-link :to="{ path: '/book' }">book</router-link>
<router-view></router-view>
</div>