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>

这样就避免了直接在模板中使用表达式导致的问题。