html props got converted to kabab case, but props are camelcase

[sgehrman]

I just updated to plugin:vue/recommended and I had problems where:

<mycomponent myProp='hello' />

got converted to:

<mycomponent my-prop='hello' />

but the prop is still myProp so it broke tons of code. I have -fix set for eslint, so it 'fixed' my code.

I see the vue/attribute-hyphenation rule, but isn't this dangerous? Can I get it to update the props too?
I also see vue/prop-name-casing which enforces camelCase on Props. Aren't these incompatible?

I have the latest of everything....

"devDependencies": {
"autoprefixer": "^9.1.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"electron": "^2.0.6",
"electron-packager": "^12.1.0",
"eslint": "^5.3.0",
"eslint-loader": "^2.1.0",
"eslint-plugin-vue": "^4.7.1",
"file-loader": "^1.1.11",
"fs-extra": "^7.0.0",
"imagemin": "^6.0.0",
"img-loader": "^3.0.0",
"node-notifier": "^5.2.1",
"node-sass": "^4.9.2",
"postcss-loader": "^2.1.6",
"sass-loader": "^7.1.0",
"style-loader": "^0.21.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue": "^2.5.17",
"vue-color": "^2.4.6",
"vue-devtools": "^4.1.4",
"vue-loader": "^15.2.6",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.17",
"vuetify": "^1.1.9",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5",
"webpack-merge": "^4.1.4"
},
"dependencies": {
"archiver": "^2.1.1",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"debounce": "^1.1.0",
"electron-context-menu": "^0.10.0",
"gsap": "^2.0.1",
"jquery": "^3.3.1",
"nconf": "^0.10.0",
"node-machine-id": "^1.1.10",
"recursive-copy": "^2.0.9",
"social-share-kit": "^1.0.15",
"stellar-js-utils": "git://github.com/StellarKit/stellarkit-js-utils.git",
"vuex": "^3.0.1",
"youtube-player": "^5.5.0"
}

[michalsnik]

Hello @sgehrman ! Thanks for posting the issue. Can you please share your code?
The props can be declared in camelCase but passed with hyphen - there should be no problem with that.

So for example this code should work fine:

<!-- TheMessage.vue -->
<template>
  <h2>{{ myMessage }}</h2>
</template>

<script>
export default {
  props: {
    myMessage: {
      type: String,
      required: true
    }
  },
};
</script>

<TheMessage my-message="Hello" />

Is your case different?

[sgehrman]

I can do some more testing, but one prop I saw fail was 'contentID' I wonder if the D being capitalized is the issue? linting converted it to content-id, but this.contentID was undefined in my component.

[sgehrman]

yeah, I did a quick test and contentID got switched to content-id and it fails. It does work if I change the prop to contentId

[michalsnik]

Yeah, the capital D is definitely the problem here, or rather our script for dasherizing. It might sound strange but it should transform contentID to content-i-d, and everything would work properly.

[armano2]

@michalsnik are you working on this (Aug 14)?
if not i can take a look