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

【问题标题】：Pass html element string to vue custom directive, issue with eslint将html元素字符串传递给vue自定义指令，eslint问题
【发布时间】：2019-12-22 22:14:24
【问题描述】：

我创建了两个自定义 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);
    }
});

【问题讨论】：

标签： javascript vue.js

【解决方案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>'
 }
}

【讨论】：

我收到此错误：Node.insertBefore 的参数 1 不是对象。
@gabogabans Node.insertBefore 方法需要一个 dom 对象而不是 html 字符串。参考。 Mdn Node.insertBefore