Object with data attributes passed into component as prop isn't kebap-cased by Vue

Question

https://jsfiddle.net/snLxa8g1/
I'm passing an object as a prop to a component which then uses v-bind to insert all of the key-value pairs as attributes into a div element. In this example snippet, I pass { dataXyz: 'hey' } , which is then rendered lower-case in the DOM. How can I instead convert this CamelCase object notation to kebap-case with Vue (eg the attributes key becomes data-xyz in the dom)? Is there a Vue-specific helper function/method to accomplish this? The docs shortly mention Camel- and kebap-casing, but don't talk about any way I can convert the passed object to arrive as described :/

Answer 1

I found this useful code snippet for your use case

string .replace(/([a-z0-9])([AZ])/g, '$1-$2') .replace(/([AZ])([AZ])(?=[az])/g, '$1-$2') .toLowerCase();

Reference https://gist.github.com/nblackburn/875e6ff75bc8ce171c758bf75f304707#gistcomment-2874149

This jsfiddle might help you https://jsfiddle.net/pwmuebnL/