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

<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>

<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>

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

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