Vue directive to set or modify element property

Question

So, I have plenty elements like that:

<some-custom-component
  :errors="formErrors.has(getErrorKey('town'))"
  :error-messages="formErrors.getAll(getErrorKey('town'))"
></some-custom-component>

Property formErrors and function getErrorKey achieved by mixin. I've tried to create a directive to reduce this div definition. I want something like that:

<some-custom-component v-errorable="'town'"></some-custom-component>

But I stucked with that.

// errorable.js
export default {
  name: 'errorable',
  bind: function (el, binding, vnode) {
    // What should I write this to achive this?
  }
}

UPD: I think I should provide more info. formErrors is computed value and getErrorKey is method which returns key to check (in most ways it will be the same as provided paramether 'town' -> 'town' etc.)

Answer 1

try code below:

export default {
  name: 'errorable',
  componentUpdated (el, binding, vNode) {
    let {formErrors,getErrorKey} = vNode.context,
        {value} = binding
    el.setAttribute('errors',formErrors.has(getErrorKey(value)))
    el.setAttribute('error-messages',formErrors.getAll(getErrorKey(value)))
  }
}