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.
You can simply use kebab-case in templates and camelCase on the JS side.
<recordDetail :record-id="123" />
will correspond to
props: {
recordId: {
...
}
}