Closed
Description
What problem does this feature solve?
If you have a directive that relies on a piece of user data (e.g. language), in server side rendering you need to be able to create a new directive per request.
const getTranslateDirective = lang => ( {
bind () {
// access to lang
},
update () {
// access to lang
}
})
const translate = getTranslateDirective(() => parsedLangHeader.language)
// PROBLEM - this sets translate a directive globally across reqeusts
Vue.directive('translate', translate)However this is a problem because when you call Vue.directive('translate', translate) this changes the translate directive across ALL requests.
What does the proposed API look like?
What is needed is a way to make directives available to a component and all of it's children components
const getTranslateDirective = lang => ( {
bind () {
// access to lang
},
update () {
// access to lang
}
})
const translate = getTranslateDirective(() => parsedLangHeader.language)
new Vue({
directives: {
translate: {
module: translate,
provide: true // Makes the directive available to this component and all of it's children.
}
}
})Metadata
Metadata
Assignees
Labels
No labels