Vue.js v-bind .camel modifier: not hidden in camelCase

Question

I am new to Vue.js and ask the main question.

I use the modifier .cameland try to convert the attribute name "data-abc-def" (kebab-case) to "dataAbcDef" (camelCase), but as a result I get "dataabcdef", i.e. this line is lowercase, not camelCase.

Below is a snippet of code.

<div id="app">
  <a href="#" :data-abc-def.camel="id">${ text }</a>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    text: 'Hello World！',
    id: '123456789！'
  }
});

And the result I get ...

Answer 1

.camelcannot be applied to arbitrary attributes, attributes data-*(they work with the SVG attribute viewBox, see this demo ).

See this comment by Vue.js creator for an old issue, indicating that:

, , HTML camelCase camelCase [& hellip;]

, , .camel.

, :

camelCase in-DOM.