Vue $ refs and kebab

Question

In vue 1, this could be done:

<app v-ref:test-app></app> 

and then refer to it like this:

 vm.$refs.testApp; 

however, in vue 2, the syntax for ref has changed to:

 <app ref="test-app"></app> 

but this can no longer be referenced

 vm.$refs.testApp 

instead, it only works if:

 <app ref="testApp"></app> 

which is prohibited in standard DOM materials. This is mistake? can kebabs be no longer used?

Answer 1

Since the syntax has been changed from the attribute of an element with a namespace (ie v-ref:foo-bar ) with the usual attribute of a key-value pair (ie ref="fooBar" ), the implicit kebab-case -to-camel- the case conversion is no longer applicable, since the reference name is a simple string and is not limited by the need to match the required HTML syntax in lowercase kebab.

In other words, you can identify ref with any string, so Vue does not make sense to manipulate it. Take a look at this CodePen for an example in action of what I mean.

But basically, the simple value of a string reference means that you can define the link as follows:

 <div id="app" ref="test ** app!"></div> 

and link to it with Vue as follows:

 this.$refs['test ** app!'] 

In short, no, this is not an error, but no, the automatic conversion of the kebab code no longer occurs.