我创建了两个自定义 vue 指令以在另一个元素之后或之前插入一个 html 元素,我将 html 元素字符串传递给我应用该指令的元素,但 VS 代码给我以下错误:
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);
}
});
最佳答案
问题出在双引号 ""
上。由于 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>'
}
}
关于javascript - 将 html 元素字符串传递给 vue 自定义指令,eslint 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59448405/