微信小程式 wx:key 高階列表迴圈

阿新 • • 發佈：2019-01-11

讓我們先看看程式碼

.wxml 程式碼

<block wx:for="{{items}}">
<label><checkbox />{{item.title}}</label>
</block>
<button bindtap="chng">變更項</button>

.js 程式碼

  data: {
    items: [
{
  id: 1,
  title: "a"
},
{
  id: 2,
  title: "b",
},
{
  id: 3,
  title: "c",
}
]
},

  chng: function

(e){
    this.setData({
      items: [
{
  id: 2,
  title: "b"
},
{
  id: 1,
  title: "a",
},
{
  id: 3,
  title: "c",
}
]
  })
}

效果如下：

點選按鈕“變更項”前，我們選中第二項，即 b 那一項。效果如下：

wx:for 迴圈

點選按鈕“變更項”後，我們改變了 items 項的順序。效果如下：

wx:for 迴圈

雖然字母順序變了，但是選擇項沒有變。

如果我們希望使用者輸入也跟隨，則使用 wx:key

wx:key 指定 items 中一個具有唯一值的屬性，比如我們這裡的 id，

將 <block wx:for="{{items}}"> 改為 <block wx:for="{{items}}" wx:key="id"

>，注意：是 wx:key="id"，不是 wx:key="{{id}}"。

此時，點選按鈕“變更項”後，我們改變了 items 項的順序。效果如下：

wx:for 迴圈

以上只是改變順序，如果是改變 items 元素個數，道理一樣的。

再細化一下，如果我們對 checkbox 使用了 checked="{{checked}}"，而 setData 賦新值時為陣列元素設定了：{ id:2, checked:false, title:"b" }, 而在點按鈕之前又選中了 b，點按鈕後，是繼續選中 b，還是聽新值的呢？聽新值的。

那新值不要 checked 屬性，是不是就繼續選中 b 呢？也不是，因為沒有賦值，對 {{checked}} 來說，相當於 false（boolean 預設值是 false）。