This is the markup for the checkbox using material-design-lite:

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox">
  <input type="checkbox" id="checkbox" class="mdl-checkbox__input" />
  <span class="mdl-checkbox__label">Checkbox</span>
</label>

Problem is, that the labels for is connected to the inputs id.

So when I add dynamically a new checkbox, I have to also add an id. But how do I find out which Id to add? Wouldn't it be a problem, when I am later going to add these rows into a database?

Here is the working example:

Notice the checkbox of the new task you add

This is the markup for the checkbox using material-design-lite:

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox">
  <input type="checkbox" id="checkbox" class="mdl-checkbox__input" />
  <span class="mdl-checkbox__label">Checkbox</span>
</label>

Problem is, that the labels for is connected to the inputs id.

So when I add dynamically a new checkbox, I have to also add an id. But how do I find out which Id to add? Wouldn't it be a problem, when I am later going to add these rows into a database?

Here is the working example:

http://codepen.io/anon/pen/QjNzzO

Notice the checkbox of the new task you add

• javascript
• html
• css
• vue.js
• material-design-lite

4 Answers 4

As mentioned, you need to upgrade the element. You could call ponentHandler.upgradeDom() instead of ponentHandler.upgradeElement().

http://codepen.io/pespantelis/pen/pjbvBL

Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function.

To upgrade all elements, use this code:

ponentHandler.upgradeAllRegistered();

http://www.getmdl.io/started/index.html#dynamic

How Component Handler works?

My personnal approach is to create a ponent. I have a working one here in coffeescript and jade

Basically you need to call ponentHandler.upgradeElements(el). Last time I checked this wasn't enough as it wasn't adding the ripple effect so you also need to upgrade the lastChild. Please note there's a difference with ponentHandler.upgradeElement(el) and ponentHandler.upgradeElements(el) which, if I recall correctly, walk deeply the dom.

About the problem with the id you should just use the $index. I updated the codepen so it solves your problem and I'll e back at you to help you with the style of the checkbox(which is not the question initially).

http://codepen.io/anon/pen/dYMBqj?editors=101

You need to call ponentHandler.upgradeElement(el) after adding the checkbox to the DOM. I'm not familiar with vue.js, so I can't suggest the specific code change required, but this article seems like it has the answer.