怎么解决绑定{{ index < collectname.length-1 ? " > " : "" }}报ESLint: Parsing error: invalid-first-character-of-tag
时间: 2023-12-14 14:38:00 浏览: 35
这个问题可能是因为你在模板字符串中使用了大括号,但是没有使用正确的语法。在模板字符串中,如果你想要使用 JavaScript 表达式,应该使用 `${}` 包裹起来。
例如,如果你想要在模板字符串中使用一个三元运算符,可以这样写:
```
${index < collectname.length - 1 ? " > " : ""}
```
这样就可以避免出现 `Parsing error: invalid-first-character-of-tag` 的错误了。
相关问题
vue怎么解决绑定{{ index < collectname.length-1 ? " > " : "" }}报ESLint: Parsing error: invalid-first-character-of-tag错误
这个错误是因为 Vue 模板中的花括号 {{ }} 与 ESLint 规则冲突导致的。解决方法有两种:
1. 禁用 ESLint 规则
在 .eslintrc.js 文件中添加如下配置:
```javascript
rules: {
'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
},
```
这样就会禁用掉 ESLint 的该规则,但同时也会导致其他未知的问题。
2. 使用计算属性
将绑定逻辑放到计算属性里面,再在模板中使用计算属性即可。
```html
<template>
<div>{{ collectnameWithSeparator }}</div>
</template>
<script>
export default {
data() {
return {
collectname: ['a', 'b', 'c'],
};
},
computed: {
collectnameWithSeparator() {
return this.collectname.map((name, index) => {
return index < this.collectname.length - 1 ? name + ' > ' : name;
}).join('');
},
},
};
</script>
```
这样就避免了直接在模板中使用表达式导致的问题。
[vue/no-parsing-error] Parsing error: missing-whitespace-between-attributes.eslint-plugin-vue
这个错误是由 ESLint 的 Vue 插件报告的。它表示在 Vue 模板中发现了一个解析错误,具体是属性之间缺少了空格。
在 Vue 模板中,每个属性应该在其前后有一个空格,例如:
```html
<template>
<div class="container" v-if="isVisible">
<p v-for="item in items" :key="item.id">{{ item.name }}</p>
</div>
</template>
```
如果你在属性之间没有加入空格,就会触发这个错误。
你可以通过在属性之间添加空格来解决这个问题:
```html
<template>
<div class="container" v-if="isVisible">
<p v-for="item in items" :key="item.id">{{ item.name }}</p>
</div>
</template>
```
确保每个属性的前后都有一个空格,这样就不会再触发这个错误了。