search

vuejs / eslint-plugin-vue

Official ESLint plugin for Vue.js
https://eslint.vuejs.org/
MIT License
4.44k stars 663 forks source link

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

Closed sgehrman closed 5 years ago

sgehrman commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 5 years ago

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