¿Cómo agregar atributos personalizados con dos puntos en HAML?

vue.js

Question

Empecé a trabajar con Vue.js donde los controladores de eventos requieren dos puntos y, a veces puntos:

<div v-on:click="doSomething">

o <div v-on:keyup.enter="doSomething">

Pero aquellos se rompen en HAML:

%div{ v: { on:click: ''doSomething'' } }

Y doblemente con el punto: %div{ v: { on:keyup.enter: ''doSomething'' } }

¿Hay alguna manera de usarlos, de alguna manera como el guión bajo para obtener un guión?

Ejemplo: %div{ data: { my_value: ''something'' } }

renderizará: <div data-my-value="something">

Answer 1

Simplemente use cadenas en lugar de símbolos para las teclas del mapa:

%div{ v: { ''on:click'' => ''doSomething'' } }

y

%div{ v: { ''on:keyup.enter'' => ''doSomething'' } }