Question

所以，我有很多这样的元素：

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

mixin实现了

属性formErrors和函数getErrorKey。我试图创建一个指令来减少这个div定义。我想要这样的东西：

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

但我坚持这一点。

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

UPD：我想我应该提供更多信息。 formErrors是计算值，getErrorKey是返回要检查的键的方法（在大多数情况下，它将与提供的参数'town' - ＆gt;'town'等相同。）

Answer 1

尝试以下代码：

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)))
  }
}

Answer 2

我解决了类似的问题：

export default {
name: 'errorable',
bind(el, binding, vNode) {
    let { formErrors, getErrorKey } = vNode.context,
        { value } = binding

    //with v-text-field's props 'error-messages'(Array) works correctly, I did it for my proj
    Vue.set(el.__vue__._props.errorMessages,
        el.__vue__._props.errorMessages.length,
        ...formErrors.getAll(getErrorKey(value)));

    //if attribute 'errors' is array
    Vue.set(el.__vue__._props.errors,
        el.__vue__._props.errorMessages.length,
        ...formErrors.has(getErrorKey(value)));

    //if you mean about 'error'(Boolean) - props for v-text-field in vuetify, but row below probably get warning
    Vue.set(el.__vue__._props, 'error', formErrors.has(getErrorKey(value)));
}}

Vue指令用于设置或修改元素属性

2 个答案: