vuejs/core

Directives not working with SVG

Closed this issue · 2 comments

vandelpavel commented

Version

3.2.27

Reproduction link

jsfiddle.net/rvocfqwn/22/

Steps to reproduce

You must use an svg image and use a custom directive like in the fiddle. You can see that if the directive is on another element it works while on svg's will return an error.

What is expected?

Should works fine and log the element

What is actually happening?

Returns an error

lidlanca commented

hoisting issue

<template>
  <b>{{msg}}</b>
  <svg  v-x>
    <path d="M2,3H5.5L12"/>
  </svg>
</template>

withDirectives called outside render function, and _directive_x is unscoped

const _hoisted_1 = _withDirectives(/*#__PURE__*/_createElementVNode("svg", null, [
  /*#__PURE__*/_createElementVNode("path", { d: "M2,3H5.5L12" })
], -1 /* HOISTED */), [
  [_directive_x]
])

render function

return (_ctx, _cache) => {
  const _directive_x = _resolveDirective("x")

  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _createElementVNode("b", null, _toDisplayString(msg.value), 1 /* TEXT */),
    _hoisted_1
  ], 64 /* STABLE_FRAGMENT */))
}
}
edison1105 commented

caused by:

  • force block for custom dirs
  • svg and foreignObject also force block
  • svg + custom dirs also force block, but here we skip the logic

    core/packages/compiler-core/src/transforms/hoistStatic.ts

    Lines 171 to 177 in 4768f26

    if (
    codegenNode.isBlock &&
    node.tag !== 'svg' &&
    node.tag !== 'foreignObject'
    ) {
    return ConstantTypes.NOT_CONSTANT
    }
  • 👍3