Material Design Lite Table - 动态添加行会破坏格式
Material Design Lite Table - Adding Rows Dynamically Breaks Format
这是使用 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>
问题是，标签 for 连接到输入 id。
所以当我动态添加一个新的复选框时，我还必须添加一个 id。但是我如何找出要添加的 Id 呢？当我稍后将这些行添加到数据库中时，这不会成为问题吗？
这是工作示例：
http://codepen.io/anon/pen/QjNzzO
注意您添加的新任务的复选框
将复选框添加到 DOM 后，您需要调用 componentHandler.upgradeElement(el)。我不熟悉 vue.js，所以我无法建议所需的具体代码更改，但是这个 article 似乎有答案。
我个人的做法是创建一个组件。我在 coffeescript 和 jade
中有一个工作 here
基本上你需要调用componentHandler.upgradeElements(el)。上次我检查这还不够，因为它没有添加连锁反应，所以你还需要升级 lastChild。请注意 componentHandler.upgradeElement(el) 和 componentHandler.upgradeElements(el) 有区别，如果我没记错的话，深入 dom.
关于 id 的问题，您应该只使用 $index。我更新了 codepen，它解决了你的问题，我会回来帮助你处理复选框的样式（最初不是问题）。
如前所述，您需要升级元素。您可以调用 componentHandler.upgradeDom() 而不是 componentHandler.upgradeElement().
Material Design Lite 将在页面加载时自动注册并呈现所有标记有 MDL 类 的元素。但是，在动态创建 DOM 元素的情况下，您需要使用 upgradeElement 函数注册新元素。
要升级所有元素，请使用此代码：
componentHandler.upgradeAllRegistered();
这是使用 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>
问题是，标签 for 连接到输入 id。
所以当我动态添加一个新的复选框时，我还必须添加一个 id。但是我如何找出要添加的 Id 呢？当我稍后将这些行添加到数据库中时，这不会成为问题吗？
这是工作示例：
http://codepen.io/anon/pen/QjNzzO
注意您添加的新任务的复选框
将复选框添加到 DOM 后，您需要调用 componentHandler.upgradeElement(el)。我不熟悉 vue.js，所以我无法建议所需的具体代码更改，但是这个 article 似乎有答案。
我个人的做法是创建一个组件。我在 coffeescript 和 jade
中有一个工作 here基本上你需要调用componentHandler.upgradeElements(el)。上次我检查这还不够，因为它没有添加连锁反应，所以你还需要升级 lastChild。请注意 componentHandler.upgradeElement(el) 和 componentHandler.upgradeElements(el) 有区别，如果我没记错的话，深入 dom.
关于 id 的问题，您应该只使用 $index。我更新了 codepen，它解决了你的问题，我会回来帮助你处理复选框的样式（最初不是问题）。
如前所述，您需要升级元素。您可以调用 componentHandler.upgradeDom() 而不是 componentHandler.upgradeElement().
Material Design Lite 将在页面加载时自动注册并呈现所有标记有 MDL 类 的元素。但是，在动态创建 DOM 元素的情况下，您需要使用 upgradeElement 函数注册新元素。
要升级所有元素，请使用此代码：
componentHandler.upgradeAllRegistered();