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

Question

I have this data which I want to display it out in Vue:

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

The problem is when I save my code, Eslint add extra space for "full-name", from

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

to

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

and when I run it, it just display NaN.

In .eslintrc.js, I have added "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"
  }
};

How do I fix this?

score 3 · Accepted Answer · answered Dec 08 '20 at 00:28

You need to use square bracket syntax to access property names containing hyphens. Otherwise it will be treated as a minus operator.

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

The normal rules for JavaScript property names apply within Vue template expressions. If the property name is a valid identifier you can use dot notation. Roughly speaking, that means it can contain alphanumerics, underscores and $. For other characters you need to use square brackets.

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

1 Answers1