vue怎么解决绑定{{ index < collectname.length-1 ? " > " : "" }}报ESLint: Parsing error: invalid-first-character-of-tag错误

这个错误是因为 Vue 模板中的花括号 {{ }} 与 ESLint 规则冲突导致的。解决方法有两种：

1. 禁用 ESLint 规则

在 .eslintrc.js 文件中添加如下配置：

rules: {
  'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
},

这样就会禁用掉 ESLint 的该规则，但同时也会导致其他未知的问题。

2. 使用计算属性

将绑定逻辑放到计算属性里面，再在模板中使用计算属性即可。

<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 模板中，每个属性应该在其前后有一个空格，例如：

<template>
  <div class="container" v-if="isVisible">
    <p v-for="item in items" :key="item.id">{{ item.name }}</p>
  </div>
</template>

如果你在属性之间没有加入空格，就会触发这个错误。

你可以通过在属性之间添加空格来解决这个问题：

<template>
  <div class="container" v-if="isVisible">
    <p v-for="item in items" :key="item.id">{{ item.name }}</p>
  </div>
</template>

确保每个属性的前后都有一个空格，这样就不会再触发这个错误了。

在vue3中如下代码<template v-for="item in menuInfo" :key="item.path"> <el-menu-item v-if="!item.children && !item.meta.hidden" :index="item.path" > <template #title> <!-- <el-icon><location /></el-icon> --> <span>{{ item.meta.title }}</span> </template> </el-menu-item> <el-menu-item v-if="item.children && item.children.length === 1 && !item.meta.hidden" :index="item.children[0].path" > <template #title> <!-- <el-icon><location /></el-icon> --> <span>{{ item.meta.title }}</span> </template> </el-menu-item> <el-sub-menu :index="item.path" v-if="item.children && item.children.length > 1 && !item.meta.hidden" > <template #title> <span>{{ item.meta.title }}</span> </template> <Menu :menuInfo="item.children" /> </el-sub-menu> </template>报错"item"的类型为未知

在 Vue 3 中，需要为循环的每个元素指定一个类型，否则会出现 "item" 的类型为未知的错误。你可以在组件中使用 props 选项来定义 menuInfo 的类型，例如：

<template v-for="(item: MenuInfo) in menuInfo" :key="item.path">
  ...
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    menuInfo: {
      type: Array as () => MenuInfo[],
      required: true
    }
  },
  ...
})
</script>

<!-- MenuInfo 的类型定义 -->
interface MenuInfo {
  path: string;
  children?: MenuInfo[];
  meta: {
    title: string;
    hidden?: boolean;
  };
}

在循环中使用 `(item: MenuInfo)` 来指定 item 的类型为 MenuInfo，定义组件的 props 选项时，使用 `type` 选项来指定参数类型。在这里，我们使用数组类型 `Array` 并通过 `() => MenuInfo[]` 的方式来指定数组元素的类型为 MenuInfo。