前提概要：

使用mpvue來寫小程序的代碼

我的需求

用picker實(shí)現(xiàn)一個(gè)循環(huán)里面的選擇

首先，小程序的picker目前只支持index來定位選中的值。

picker文檔

為了滿足我的需求，picker 的回調(diào)里面必須拿到以下兩點(diǎn)：
1,得到當(dāng)前我選擇項(xiàng)目在picker里面的arr的index 2，我當(dāng)前修改的是for循環(huán)的哪一項(xiàng)

做法

picker在回調(diào)是change方法。

<ul class="select-con">
        <li v-for="(item, index) in skillMaps"
            class="select-item"
            :key="index">
          <van-icon :name="deleteIcon" class="vant-icon" @click="deleteSelectedItem(item, index)"/>
          <picker
            :range="levels"
            range-key="label"
            :data-id="item.value"
            :data-levelIndex="index"
            class="level-picker"
            :value="item.level"
            @change="handleLevelChange">
            <view class="list-item">
              <label class="label-value">{{item.label}}</label>
              <div class="action-con">
                <span class="label-value">{{levels[item.level].label}} </span>
                <van-icon name="arrow" :color='color' @click="showPicker" class="vant-icon"/>
              </div>
            </view>
          </picker>
        </li>
      </ul>

(這里屬性在data里面的定義過程省略)
所以是在我定義的handleLevelChange里面做。

但是

picker的change 只支持一個(gè)回調(diào)參數(shù)。也就是 e.這個(gè)里面可以通過

 let index = e.mp.detail.value
// 以上便是當(dāng)前選擇的picker的index。

那么修改的是當(dāng)前的哪一項(xiàng)里面的picker呢？
這個(gè)怎么做？

辦法：

 :data-id="item.value"
  :data-levelIndex="index"

通過小程序的data-XX 來寫自定義的屬性，通過這樣的方式把當(dāng)前修改的index 放到 dataset 里面。這樣在picker的change 事件里面就可以拿到當(dāng)前的index.然后再來修改當(dāng)前l(fā)ist里面對應(yīng)的這個(gè)index里面的level的值。
于是我寫成了這樣：

  let pickerIndex = e.currentTarget.dataset.levelindex // 當(dāng)前修改的哪一項(xiàng)
  let itemIndex = e.mp.detail.value // 選擇了picker里面的哪個(gè)值的index
this.skillMaps[pickerIndex].level = itemIndex  
// 再修改被循環(huán)的skillMaps 對應(yīng)的index 里面的 level 來達(dá)到改變view上顯示的目的

結(jié)果就是：

失敗??！

頁面上沒有正確顯示，但是我的APPDATA里面看，數(shù)據(jù)是更改了（也就是數(shù)據(jù)變成了level = 2 ，那么就應(yīng)該顯示精通，但是實(shí)際上還是顯示的入門）。

經(jīng)過我的一番調(diào)查，是vue的坑（因?yàn)槲矣玫氖莔pvue）。
由于小程序的picker更改的是下標(biāo)，但是vue又檢測不到下標(biāo)的變更，所以導(dǎo)致，數(shù)據(jù)變更了，頁面上無變化。

vue 官方文檔

根據(jù)官網(wǎng)建議，為了解決這個(gè)問題，做了以下的操作。

 handleLevelChange (e) {
        let pickerIndex = e.currentTarget.dataset.levelindex
        let itemIndex = e.mp.detail.value
        this.$set(this.skillMaps, pickerIndex, {...this.skillMaps[pickerIndex], level: itemIndex})
      },
// 使用$set 來重新渲染當(dāng)前的dom數(shù)，讓他被檢測到。

以上便是小程序的picker和Vue的index無法被檢測，這兩個(gè)問題，同時(shí)被我遇到的問題。
其實(shí)小程序picker只能用index來定位，這個(gè)我表示體驗(yàn)不好。因?yàn)檎５氖褂们榫岸疾皇莍ndex是value或者id之類的有效字段。
希望以后這里會被優(yōu)化吧。