vuejs2

A custom directive similar to v-if in vuejs

by

Try to use this hack: Vue.directive(‘permission’, (el, binding, vnode) => { if (!isUserGranted(binding.value)) { // replace HTMLElement with comment node const comment = document.createComment(‘ ‘); Object.defineProperty(comment, ‘setAttribute’, { value: () => undefined, }); vnode.elm = comment; vnode.text=” “; vnode.isComment = true; vnode.context = undefined; vnode.tag = undefined; vnode.data.directives = undefined; if (vnode.componentInstance) { vnode.componentInstance.$el = … Read more

Pass params to mapGetters

by

If your getter takes in a parameter like this: getters: { foo(state) { return (bar) => { return bar; } } } Then you can map the getter directly: computed: { …mapGetters([‘foo’]) } And just pass in the parameter to this.foo: mounted() { console.log(this.foo(‘hello’)); // logs “hello” }

what is vuex-router-sync for?

by

Here’s my two cents. You don’t need to import vuex-router-sync if you cannot figure out its use case in your project, but you may want it when you are trying to use route object in your vuex‘s method (this.$route won’t work well in vuex’s realm). I’d like to give an example here. Suppose you want … Read more

How to use vue-router params

by

Since you want to pass params to the component of the respective route you route object’s path property should have a dynamic segment denoted by : followed by the name of the key in your params object so your routes should be routes: [ {path: ‘/newLocation/:foo’, name: ‘newLocation’, component: newComponent} ] Then for programmatically navigating … Read more

Vue-Test-Utils Unknown custom element:

by

Add the router-link stub to the shallow (or shallowMount) method options like this: const wrapper = shallow(TempComponent, { propsData: { temp }, stubs: [‘router-link’] }) or this way: import { RouterLinkStub } from ‘@vue/test-utils’; const wrapper = shallow(TempComponent, { propsData: { temp }, stubs: { RouterLink: RouterLinkStub } }) The error should go away after … Read more

tech