将html元素字符串传递给vue自定义指令，使用eslint发出

Question

我创建了两个自定义vue指令来在另一个元素之后或之前插入一个html元素，我将一个html元素字符串传递给该元素我应用了该指令，但VS Code给了我以下错误：

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

我是这样做的：

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

我的指令看起来像这样：

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

Answer 1

问题出在双引号""上。因为html属性值是用双引号括起来的，所以我们不能在字符串中使用它们。

您可以将该值赋给实例变量，并在模板中引用它，如下所示：

Vue模板

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

Vue脚本

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