Change template inside component
dlishtvan opened this issue · comments
Hi. I want to change template inside my component. The problem is: method getBreadcrumb(crumb.meta.breadcrumb)
is not defined on the instance. How I can fix that?
example of my code:
<template id="crumbs">
<nav v-if="$breadcrumbs.length" class="breadcrumb" aria-label="breadcrumb">
<ul class="breadcrumb">
<li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">
<router-link :to="{ path: crumb.path }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>
</li>
</ul>
</nav>
</template>
<script>
import Vue from 'vue';
import breadcrumbs from 'vue-2-breadcrumbs';
Vue.use(breadcrumbs, {
template: '#crumbs'
});
@letanure Hi, try
Vue.use(breadcrumbs, {
methods: {
getBreadcrumbs() {...}
},
template: '#crumbs'
});
@letanure Hi, try
Vue.use(breadcrumbs, { methods: { getBreadcrumbs() {...} }, template: '#crumbs' });
unfortunately same error
hmmm, may be
<script>
import Vue from 'vue';
import breadcrumbs from 'vue-2-breadcrumbs';
Vue.use(breadcrumbs, {
template: '#crumbs'
});
export default {
methods: {
getBreadcrumbs() {...}
}
}
</script>
if you don’t work out, put an example on a github I’ll try to solve this problem
hmmm, may be
<script> import Vue from 'vue'; import breadcrumbs from 'vue-2-breadcrumbs'; Vue.use(breadcrumbs, { template: '#crumbs' }); export default { methods: { getBreadcrumbs() {...} } } </script>
this is work, but how I can extend code of this method, for example I need something like this.
export default {
methods: {
getBreadcrumbs = breadcrumbs.getBreadcrumbs();
}
}
and just use it on my template? Do you understand what I want?
Do you understand what I want?
I'm not sure that I understand your idea, but it is probably worth making it as a component and reuse it.
I made as in a doc.
Vue.use(VueBreadcrumbs, {
template:
`<nav class="breadcrumb" v-if="$breadcrumbs.length" aria-label="breadcrumb">
<ol class="breadcrumb">
<li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">
<router-link :to="{ path: crumb.path }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>
</li>
</ol>
</nav>`
});
Can I close issue?
Can I close issue?
Of course, if you find a solution