search

dattn / dnd-grid

A vuejs grid with draggable and resizable boxes
307 stars 48 forks source link

In templates camelcase gets converted to kebab-case #49

Closed tyrauber closed 4 years ago

tyrauber commented 4 years ago

Vue.JS strongly recommends using kebab-case in templates. Camelcase data attribute names get converted to kebab-case, preventing dnd-grid from being used with grid boxes in templates.

For example, a template:

<template>
  <dnd-grid-box :boxId="boxId">
    <h1 v-html="boxId"></h1>
  </dnd-grid-box>
</template>

Gets converted in the DOM to:

<dnd-grid-box box-id="box-1">
  <h1>box-1</h1>
</dnd-grid-box>

Because the prop data attributes gets assigned to box-id, dnd-grid fails to initialize the box.

Any idea how to work around that? It would be nice to break up a large grid into templates.

tyrauber commented 4 years ago

Actually, the easiest solution is just to move the template within the dnd-grid-box declaration. Closing because there is a simple, workable solution.