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
Share Improve this question asked Sep 18, 2015 at 17:58 LoveAndHappinessLoveAndHappiness 10.1k22 gold badges74 silver badges107 bronze badges4 Answers
Reset to default 3As 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.