Vant picker选择器设置默认值导致选择器失效的解决

目录

• Vant picker选择器设置默认值导致选择器失效
• 说下场景
• Column 数据结构
• 解决方案
• 总结

Vant picker选择器设置默认值导致选择器失效

vant 版本 > =2.12.27

说下场景

自定义选择器数据结构是数组对象，picker默认显示第一个或上传选择的项，切换选择器失效。

htML 代码：

template>
      div class="van-cell van-cell-padding0">
        van-field      readonly      clickable      :value="newValue"      :label="data.label"      :placeholder="data.placeholder"      :required="data.required"      is-link      :disabled="disabled"      @click="clickAction"      :error-message="errorMessage"    >
        /van-field>
        van-popup v-model="showPicker" posITion="bottom">
          van-picker        :title="data.title"        show-toolbar        :columns="data.data"        :defaultIndex="defaultIndex"        @confirm="onConfirm"        @cancel="showPicker = false"        @change="onChange"      />
        /van-popup>
      /div>
    /template>
    

js代码：

script>
export default {
  name: "VantPicker",  model: {
    PRop: "value",    event: "changed",  }
,  props: {
    value: {
      tyPE: [Number, String],      default: function () {
            return "";
      }
,    }
,    data: {
      type: Object,      default: function () {
        return {
          label: "下拉框",          rules: "required",          title: "下拉框",          data: [],        }
    ;
      }
,    }
,    "error-message": {
      type: String,      default: function () {
            return "";
      }
,    }
,  }
,  data() {
    return {
      defaultIndex: "",      newValue: "",      showPicker: false,      disabled: false,    }
    ;
  }
,  mounted() {
    if (this.value) {
          this.defaultIndex = this.value;
      // bug在这里      this.setSelectedValue(this.value);
    }
        this.disabled = this.data.disabled;
  }
,  methods: {
    clickAction() {
          if (!this.data.disabled &
    &
 !this.disabled) {
            this.showPicker = true;
      }
    }
,    onConfirm(values) {
          this.newValue = values.text;
          this.$emit("changed", values.id);
          this.showPicker = false;
    }
,    onChange(picker, value) {
          console.info(picker, value);
    }
,    getCheckedItemByid(id) {
          let lists = this.data.data ? this.data.data : [];
          let item = null;
          for (let i = 0;
     i  lists.length;
 i++) {
        if (id == lists[i].id) {
              item = lists[i];
              break;
        }
      }
          return item;
    }
,    getCheckedIndex(id) {
          let lists = this.data.data ? this.data.data : [];
          let index = null;
          for (let i = 0;
     i  lists.length;
 i++) {
        if (id == lists[i].id) {
              index = i;
              break;
        }
      }
          return index;
    }
,    setSelectedValue(newVal) {
          let checkedItem = this.getCheckedItemByid(newVal);
       if (checkedItem) {
            this.newValue = checkedItem.text;
      }
 else {
            this.$emit("changed", "");
            this.newValue = "";
            this.defaultIndex = "";
      }
    }
,    setDisabled(disabled) {
          this.disabled = disabled;
    }
,  }
,  watch: {
    value(newVal) {
      if (!this.$utils.iSEMpty(newVal)) {
            this.defaultIndex = this.getCheckedIndex(this.value);
            this.setSelectedValue(newVal);
      }
 else {
            this.newValue = "";
            this.defaultIndex = "";
      }
    }
,  }
,}
    ;
    /script>
    

问题

选择器的在做选中，点击确认时，选中的值没有发生变化，还是未切换选择之前的值。

问题定为

js代码中行位置： this.defaultIndex = this.value;  // bug在这里。

问题分析：这里服务器使用的key值，导致服务器计算picker选择的索引index出错，用户选中picker值的某一项，然后点击右上角的“确认”按钮，picker选中的值没有发生变化。

再看官方API defaultIndex属性的描述：defaultIndex 初始选中项的索引（类型为number），默认为 0。

Column 数据结构

当传入多列数据时，columns 为一个对象数组，数组中的每一个对象配置每一列，每一列有以下 key:

解决方案

this.defaultIndex = this.value修改如下：

this.defaultIndex = this.getCheckedIndex(this.value)  // 根据this.value循环数组找到key值选择器中的索引值，赋值给defaultIndex,问题得到解决。

选中器colums数据结构如下：

[    {
        id: "101"        text: "选项2"    }
,{
        id: "102"        text: "选项2"    }
    ]

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

• Vant Weapp组件踩坑:picker的初始赋值解决
• vant的picker的坑及解决
• 浅谈vant组件Picker 选择器选单选问题

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！