如何在 HAML 中添加带有冒号或点的自定义属性？

Question

我开始使用 Vue.js，其中事件处理程序需要冒号，有时需要点：

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

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

但是 HAML 中的那些中断：

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

加倍加点：%div{ v: { on:keyup.enter: 'doSomething' } }

有没有办法使用它们，就像下划线一样得到连字符？

示例：%div{ data: { my_value: 'something' } }

将呈现：<div data-my-value="something">

Answer 1

地图键只使用字符串而不是符号：

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

和

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

Answer 2

您可以使用以下备用语法：

%div{"v-on:keyup.enter": 'doSomething'}

和

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