为什么Eslint会用连字符自动为对象属性名称添加一个空格？

Question

我有这个数据，我想用Vue显示出来：

<script>
export default {
  data() {
    return {
      heroes: [
        {
          response: "success",
          id: "332",
          name: "Hulk",   
          biography: {
            "full-name": "Bruce Banner"
          }
        }
      ]
    };
  }
};
</script>

问题是，当我保存代码时，Eslint为"full-name“添加了额外的空间，从

<h2>{{ hero.biography.full-name }}</h2>

至

<h2>{{ hero.biography.full - name }}</h2>

当我运行它时，它只显示NaN。

在.eslintrc.js中，我添加了"vue/attribute-hyphenation": "off"

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "vue/attribute-hyphenation": "off"
  }
};

我该如何解决这个问题？

Answer 1

您需要使用方括号语法来访问包含连字符的属性名称。否则，它将被视为减号运算符。

<h2>{{ hero.biography['full-name'] }}</h2>

JavaScript属性名称的常规规则适用于Vue模板表达式。如果属性名称是有效的标识符，则可以使用点表示法。粗略地说，这意味着它可以包含字母数字、下划线和$。对于其他字符，您需要使用方括号。