Vue: Snake case props support.

[temp-name-9956]

Somewhat related to #1000

I think there should be - probably in global Vue config - an option to replace camel case with snake case. Working with Vue props in coffee script isn't consistent with it's variable naming convention.

Making it a global option shouldn't add any visible performance overhead and would be a great thing to make Vue coffee compatible again, as it was before introducing props concept.

[yyx990803]

You can still use snake-case when declaring props in options. But in templates you have to use camelCase to refer to them because {{a-b}} will be parsed as a minus operation.

[temp-name-9956]

Actually i meant something like that, in fact:

SomeComponent = Vue.extend {

  props: ['some_value']

  # or

  props: {
    some_value: {
      type: String
    }
  }

}

And then in html:

<some-component some-value="Just an example." inline-template>

  {{ some_value }}

</some-component>

Here the underscore snake_case is perfectly aligned with coffeescript conventions, and declaring props in html mark-up using snake-case="value" is totally acceptable.

The only difference here is that Vue would have to parse some-value="value" html attribute to some_value variable instead of someValue, based on some optional config option.

[yyx990803]

Can't you use some_value="value" in HTML?

[temp-name-9956]

Right, somehow didn't thought about that. Looks like quite nice work-around for my issue. Anyway that's on the other hand isn't aligned with html conventions, at least it's a bit uncommon.

So i still think it would be a nice feature to have in Vue, but your solution makes me happy :smile:

Thanks a lot.

[yinrong]

I would like to reopen this. We are working both in web and server, so we demand snake_case coding convention which is not supported by Vue props. @yyx990803 could I propose a global config to do this? Also, do you think a pull request is helpful?

[yinrong]

@yyx990803 what's your opinion on this?

[bradlis7]

This would be in line with ruby/rails conventions as well. A global config would be a plus.

[nickmessing]

@bradlis7, I don't think we are interested in "being in line" with any back-end technology. I personally see no benefit in adding support for even more casing, existing camelCase & kebab-case is more than enough for most use cases. Adding another one "because I like it" is not a valid reason.

[bradlis7]

Well, how about coffeescript then? It's not really "because I like it". It's the ruby/rails/coffeescript coding standard.

It probably wouldn't be too hard for Vue to look at the props available, and determine if the prop is defined variableName or variable_name, and assigning it as it finds it.

[nickmessing]

@bradlis7, I am sorry if that sounded rude, I didn't mean it to, it's just that we are following HTML and JavaScipt coding standards because that's what Vue is all about and we don't follow any other coding standards since we are not affiliated to them.

[scott-fryxell]

What about people with reading difficulties. I prefer snake_case because It makes a difference in my ability to visually parse the page.

what about supporting snake case as an accessibility feature?