Vue: Allowing camel-case DOM attributes binding

[simonmysun]

Vue.js version

1.0.23

Reproduction Link

https://jsfiddle.net/voecgwp1/

Steps to reproduce

Change the value of the range input, and see the result and the code.

What is Expected?

Both of two images are expected to be blurred.

What is actually happening?

The bound attribute name of the left side has been lower-cased.

The left side one does not work in Google Chrome 51.0.2704.106 on Archlinux. The v-bind causes the failure, and text binding leaves an error.

Although HTML attributes are case-insensitive, I think we still need to distinguish the letter case, because there are not only HTML DOMs, and Vuejs seems willing to support SVG.

[simonmysun]

Well I continued my test and found that it's not vue's problem. Chrome and Firefox automatically render these attributes lower-cased initially, before vue can read it.

Seems that they lower-cased all foreign attributes. Even though I use <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" height="100" width="100"></svg>

I still hope to find a solution.

ref: http://stackoverflow.com/questions/28734628/how-can-i-set-an-attribute-with-case-sensitive-name-in-a-javascript-generated-el

[yyx990803]

If that's the case, this is a wontfix in 1.x.

In 2.0 if you use string or pre-compiled templates it won't be a problem.

[prog-rajkamal]

@simonmysun As a workaround, you can use kebab-case + .camel modifier. eg. https://jsfiddle.net/voecgwp1/1/

[simonmysun]

@yyx990803 I really appreciate for the that.

@prog-rajkamal This was great! It has solved my problem. Thank you very much! Should've read through the document.