I have a list of buttons ...
<button @click="chamaEstilo($event)" :data-el="index" class="buttonEstilo" v-for="(item, index) in filteredList" :key="index" v-if="verificaRestricao(item)" >
{{index}}
</button>
I would like you to print the {{index}} in the formatting pattern of the HTML tags for components, that is, if I send a string with the fontSize value it should print font-size and so for all occurrences of capital letters ...
I think you want to convert strings to CamelCase to kebab-case ,
You can do this like this:
function camelCaseToKebabCase(str) {
return str.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase()
}
const testes = ['fooBar', 'kebab-case', 'fontSize'];
console.log(testes.map(camelCaseToKebabCase));
/* resultado:
[
"foo-bar",
"kebab-case",
"font-size"
]
*/and use a filter for this in Vue and template would be:
<button @click="chamaEstilo($event)" :data-el="index" class="buttonEstilo" v-for="(item, index) in filteredList" :key="index" v-if="verificaRestricao(item)" >
{{index | camelCaseToKebabCase}}
</button>