vant-ui之Field輸入框和Picker結合使用時，如何綁定正確的id類型的值的問題。

很常見的需求：
表單中的一項，需要從picker控件中選擇正確的值後，展示的是字符串，然後提交到後臺服務器的則是字符串對應的value類型的值的問題。

點擊表單的檔案組，彈出Picker選擇組件，選擇正確的值，填充到表單項，但是，提交到服務器去，需要提交對應的id，而不是看到的字符串。
如何實現？

實現方式一：

定義兩個屬性，classId和className， 她兩是一 一對應的關係。

data() {
	return {
		classId: -1,
		className: "全部",
		columns: [
        { text: '全部', value: -1 },
        { text: '未分組', value: 0 },
        { text: '訪客', value: 1 },
      ],
	},
}

van-field中綁定className

     <van-field
          readonly
          clickable
          name="picker"
          :value="className"
          label="檔案組"
          placeholder=""
          @click="showClassPicker = true"
        />

然後在van-picker中，綁定的confirm函數，參數獲取到的是一個對象。
在這個函數內，同時更新className和classId，保證他倆一 一對應。

  <van-popup v-model="showClassPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onClassConfirm"
        @cancel="showClassPicker = false"
      />
    </van-popup>

    onClassConfirm(v) {
      this.classId = v.value;
      this.className = v.text;
      this.showClassPicker = false;
    },

這樣就可以了。用戶在表單中看到的是字符串，而提交給後臺的，則是與這個字符串一 一對應的id值。

方式二：van-field中依然還是使用value類型的值，只是需要給這個值，一個filter過濾器，轉換爲正確的字符串顯示，但是提交給後臺的，卻是value類型的值，譬如id