将 html 元素字符串传递给 vue 自定义指令，eslint 问题

Question

I created two custom vue directives to insert an html element after or before another element, I pass an html element string to the element I apply the directive but VS Code is giving me the following error:

Parsing error: unexpected-character-in-attribute-name.eslint-plugin-vue

This is how I'm doing it:

<rad-stack title="Precio final" v-insert-before="'<div class="RADcard3_texts_info_divider"></div>'">{{ item.finalPrice }} €</rad-stack>

My directive looks like this:

Vue.directive('insert-before', {
    isLiteral: true,
    inserted: (el, binding, vnode) => {
        el.parentNode.insertBefore(binding.value, el);
    }
});

Answer 1

The issue is with the Double Quotes "" . Since the html attribute values are wrapped with Double quotes we can't use them inside the string.

You can assign the value to the instance variable and refer it in the template as follows,

Vue Template

<rad-stack title="Precio final" v-insert-before="prefixMsg">{{ item.finalPrice }} €</rad-stack>

Vue Script

data() {
 return {
   prefixMsg: '<div class="RADcard3_texts_info_divider"></div>'
 }
}