1

I am attempting to write a Vue directive that updates the properties of a component before the component is evaluated.

For example, consider the following.

<b-modal v-i18n:title="'i18n.key'">
  Hello
</b-modal>

b-modal is a Vue Component and it takes a property called 'title'. I would like to have a custom directive that can set the property title after translating the supplied key.

That is, I would like the above code to get rewritten by the directive to:

<b-modal title="Translated Text">
  Hello
</b-modal>

So far I have read the following resources and found no reference on how to do this.

https://css-tricks.com/power-custom-directives-vue/ http://optimizely.github.io/vuejs.org/guide/directives.html

My current attempt looks like this:

Vue.directive('i18n', {
  inserted: function (el,binding) {
    const i18nKey  = binding.value;
    const attrName = binding.arg;

    el.setAttribute(attrName, i18nKey);
  }
})

This attempt sadly falls short. It results in a change to the final DOM element and has no affect on the property being past to the Vue component.

How can I can the above directive be modified to change the properties being past to the b-modal component?

Chris K
  • 11,622
  • 1
  • 36
  • 49
  • Does the translate exist in your `b-modal` component, or you want to integrate it into your custom directive? – choasia Aug 16 '17 at 14:48
  • Is there some reason that `:title="$t(i18n.key)"` won't work for you? – Bert Aug 16 '17 at 16:23
  • @Bert translation is just an example to give the question some context, to give it a meaningful use case. Yes translation can be done other ways however the core of this question is how to combine custom vue directives with vue components. Translation is just one possible use case for that. – Chris K Aug 16 '17 at 17:07
  • @choasia yes, assume that b-modal exists. For the purposes of this question it could technically be any Vue component. – Chris K Aug 16 '17 at 17:09
  • Understood. I think, however a wrapper component (a higher order component that returns a new component) would be a better way to handle this than a directive. I was playing around with an idea. What do you think of this as [a different approach](https://codepen.io/Kradek/pen/KvZPzN?editors=1010) to your problem? – Bert Aug 16 '17 at 17:09
  • @Bert I see where you are going. Yes that is a good approach, and definitely a technique that I will ferret away into my tool kit for cases where I want to customise one specific target component. What I am looking for here though is a deeper understanding of Vue directives, and whether a single directive can be used against multiple components. – Chris K Aug 16 '17 at 17:14
  • 1
    Well certainly they can be used on multiple components but the primary use case of directives in Vue2 is pretty narrowly focused on DOM manipluation; otherwise a component is recommended. In order to re-write a property as you describe, you would have to modify the vnode (passed in as the third argument in hooks) and this is recommended against in the docs. – Bert Aug 16 '17 at 17:24

0 Answers0