1

I am working on the project using eslint-plugin-vue and I have child and parent components. the child component needs to pass a value into parent components.

// parent
export default {
  name: 'recordDetail',
  props: {
     'record-id': { // however this will violate vue/prop-name-casing
        type: Number
     }
  }
}

<!-- child -->
<recordDetail
  :record-id="123"> <!-- it will violate vue/attribute-hyphenation if this is recordId="123" -->
</recordDetail>

Please give me advice on how you will deal with this and what is the best practice on Vue. Thank you.

Constantin Groß
  • 10,719
  • 4
  • 24
  • 50
kwan lok law
  • 13
  • 3

1 Answers1

3

You can simply use kebab-case in templates and camelCase on the JS side.

<recordDetail :record-id="123" />

will correspond to

props: {
  recordId: {
  ...
  }
}
Constantin Groß
  • 10,719
  • 4
  • 24
  • 50
  • I would also add that according to general rules it should be `` – Michał Sadowski Aug 04 '21 at 12:33
  • 1
    @MichałSadowski good point, I missed the component name in the tag - but actually I think the best practice is to use `PascalCase` for component tags in SFCs and string templates, but `kebab-case` when using the DOM as template, if I'm not mistaken? – Constantin Groß Aug 04 '21 at 12:38
  • You're indeed right, also checked that I've been thinking about the guideline for nuxt components. It's all confusing. – Michał Sadowski Aug 04 '21 at 12:46
  • Actually, `using kebab-case everywhere is also acceptable`, according to the docs so it's always safer to use kebab-case. – Michał Sadowski Aug 04 '21 at 13:04