Material Design Lite 表 - 动态添加行会破坏格式答案

【问题标题】：Material Design Lite Table - Adding Rows Dynamically Breaks FormatMaterial Design Lite 表 - 动态添加行会破坏格式
【发布时间】：2015-12-15 23:21:52
【问题描述】：

这是使用 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

注意您添加的新任务的复选框

【问题讨论】：

标签： javascript html css vue.js material-design-lite

【解决方案1】：

如前所述，您需要升级元素。你可以打电话给componentHandler.upgradeDom() 而不是componentHandler.upgradeElement()。

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

【讨论】：

【解决方案2】：

Material Design Lite 将在页面加载时自动注册并渲染所有标记有 MDL 类的元素。但是，在动态创建 DOM 元素的情况下，您需要使用 upgradeElement 函数注册新元素。

要升级所有元素，请使用以下代码：

componentHandler.upgradeAllRegistered();

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

How Component Handler works?

【讨论】：

【解决方案3】：

我个人的方法是创建一个组件。我有一个使用咖啡脚本和玉石的here

基本上你需要打电话给componentHandler.upgradeElements(el)。上次我检查这还不够，因为它没有添加涟漪效应，所以你还需要升级lastChild。请注意componentHandler.upgradeElement(el) 和componentHandler.upgradeElements(el) 的不同之处，如果我没记错的话，那就是深入dom。

关于id 的问题，您应该只使用$index。我更新了 codepen，所以它可以解决您的问题，我会回来帮助您解决复选框的样式（最初不是问题）。

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

【讨论】：

您的 codepen 不再起作用，github 链接已失效。
是的，它适用于 vue 0.12 :( 不幸的是我没有新链接

【解决方案4】：

在将复选框添加到 DOM 后，您需要调用 componentHandler.upgradeElement(el)。我对 vue.js 不熟悉，因此无法建议所需的具体代码更改，但这个article 似乎有答案。

【讨论】：