为什么 Eslint 会自动为带连字符的对象属性添加一个 space？

Question

我有这个数据，我想在 Vue 中显示它：

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

问题是当我保存我的代码时，Eslint 为“全名”添加了额外的 space，来自

<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 模板表达式。如果属性名称是有效标识符，您可以使用点表示法。粗略地说，这意味着它可以包含字母数字、下划线和 $。对于其他字符，您需要使用方括号。

为什么 Eslint 会自动为带连字符的对象属性添加一个 space？

Why Eslint add a space automatically for object property name with hyphen?

vue.js

eslint

eslintrc

为什么 Eslint 会自动为带连字符的对象 属性 添加一个 space？

Why Eslint add a space automatically for object property name with hyphen?

vue.js

eslint

eslintrc

为什么 Eslint 会自动为带连字符的对象属性添加一个 space？