Vant picker选择器设置默认值导致选择器失效
vant 版本 >=2.12.27
说下场景
自定义选择器数据结构是数组对象，picker默认显示第一个或上传选择的项，切换选择器失效。
ht ML 代码：
<template> <div class="van-cell van-cell-padding0"> <van-field readonly clickable :value="newValue" :label="data.label" :placeholder="data.placeholder" :requi red ="data.required" is-link :disabled="disabled" @click="clickAction" :error-message="errorMessage" > </van-field> <van-popup v-model="showPicker" pos IT ion="bottom"> <van-picker :title="data.title" show -t oolbar :columns="data.data" :defaultIndex="defaultIndex" @confirm="onConfirm" @cancel="showPicker = false" @change="onChange" /> </van-popup> </div> </template>
js代码：
<script>
export default {
n am e: "VantPicker",
model: {
PR op: "value",
event: "changed",
},
props: {
value: {
ty PE : [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,
};
},
mount ed() {
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];
br eak;
}
}
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.i SEM pty(newVal)) {
this.defaultIndex = this.getCheckedIndex(this.value);
this.setSelectedValue(newVal);
} else {
this.newValue = "";
this.defaultIndex = "";
}
},
},
};
</script>
问题
选择器的在做选中，点击确认时，选中的值没有发生变化，还是未切换选择之前的值。
问题定为
js代码中行位置： this.defaultIndex = this.value; &nbs p; // bug在这里。
问题分析：这里 服务器 使用的key值，导致服务器计算picker选择的索引index出错，用户选中picker值的某一项，然后点击右上角的[确认]按钮，picker选中的值没有发生变化。
再看 官方 API defaultIndex属性的描述：defaultIndex 初始选中项的索引（类型为number），默认为 0。
Column 数据结构
当传入多列数据时，columns 为一个对象数组，数组中的每一个对象配置每一列，每一列有以下 key:
| values | 列中对应的备选值 | Array<string | number> |
| defaultIndex | 初始选中项的索引，默认为 0 | number |
| classname | 为对应列添加额外的类名 | string | Array | object |
| children | 级联选项 | Column |
解决 方案
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 选择器选单选问题
总结
以上是 为你收集整理的 Vant picker选择器设置默认值导致选择器失效的解决 全部内容，希望文章能够帮你解决 Vant picker选择器设置默认值导致选择器失效的解决 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Vant picker选择器设置默认值导致选择器失效的解决的详细内容...