MDL在表格中添加選中的複選框

我正在爲自己做一個待辦事宜應用程序，我想要一個檢查系統。我爲這個項目使用了MDL（材料設計燈），但是發現文檔非常有限。我想添加一個項目到已經有複選框設置爲true/checked的列表中。MDL在表格中添加選中的複選框

我從別人那裏得到了代碼，得到了這個功能，但我真的不明白它。有人可以解釋給我（我也使用舊的JS版本，所以這個語法對我來說是全新的）。這是鏈接https://codepen.io/pespantelis/pen/pjbvBL，我將完成的第36行更改爲true，並獲得了我想要的確切功能。

我的HTML（我不是增加與JS的頁面），其中增加的項目沒有選中的複選框看起來像這樣

<tr> 
<td class="mdl-data-table__cell--non-numeric">Thing to do</td> 
<td><i class="material-icons md-18 delete">clear</i><i class="id">ID</i></td> 
</tr>

，這將是驚人的，如果我可以做同樣的一些輕微的調整，以使用勾號複選框來獲得MDL版本！

來源

2017-05-28 René Steeman

我不確定如果我明白你的問題是什麼，但你提供複選框的代碼筆不能用於添加新任務，因爲你添加的新任務沒有被分配一個標識符id，類似於'var task = {id：Math.floor（Math.random（）* Number.MAX_SAFE_INTEGER），body：value，completed：false};'嘗試調用uuids –

我已經構建了自己的ID系統這是完美的工作，唯一的問題是當我加載之前保存的checked = true（作爲對象屬性）的項目時，將檢查插入複選框。我只是用codepen來演示如何添加一個被選中的複選框，但我並不真正瞭解代碼，我只是在另一個stackoverflow頁面上找到它。你能解釋一下身體：完成：對我來說是真的還是假的？我真的不明白它是如何使複選框打勾的。 –

該複選框將根據輸入的「v-model」中設置的值進行檢查，請參閱https://vuejs.org/v2/guide/forms.html，然後傳遞'v-model =「task.completed」進入複選框將被檢查，如果「task.completed」是真實的，而不是其他。 –

我發現了這個問題，當我嘗試一些事情時，我犯了一個錯字，當嘗試一些事情時，我找到了解決方案。我應該插入HTML工作看起來是這樣的：

<tr class="is-selected"> 
<td class="mdl-data-table__cell--non-numeric">Thing to do</td> 
<td> 
    <i class="material-icons md-18 delete">clear</i> 
    <i class="id">ID</i> 
</td>

謝謝大家的幫助！

來源

2017-05-29 18:47:12

MDL在表格中添加選中的複選框

回答

相關問題