Vue: dynamic attribute names are not recognized as described in the Vue.js docs

Created on 21 Feb 2019 · 3Comments · Source: vuejs/vue

Version

2.6.6

Reproduction link

https://jsfiddle.net/ferpzqvx/2/

Steps to reproduce

Create a Vue app with data property attrName with a value of href
Create an <a> HTML tag with the following attribute bind v-bind:[attrName]=some-link

What is expected?

I was expecting the DOM to produce output similar to the following, as per expectations set here

<a href="www.google.com">Website</a>

I could expect that the documents should be fixed so as to not show a camel case example.

What is actually happening?

The above will fail with the console saying that attrname does not exist.

attrname in lowecase being nowhere in the code written.

Source

rustysys-dev

Most helpful comment

@posva thank you, and yes, I will check vuejs.org repo and open a new issue there if the issue is not fixed there.

EDIT: Ended up created the pull request, it is waiting to be merged! Thanks again!

rustysys-dev on 21 Feb 2019

❤3

All 3 comments

Damn, this should be indeed updated in docs.we cannot use camelCase variables in html templates, we should reflect that via a note. It will only works on Vue files and string templates. Could you check if the issue exists on vuejs.org repo and if it doesn't, open a new one please? If you feel like creating a pull request instead that would also be good