將 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>'
 }
}