blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(Picker): failed to update modelValue

Browse Source
This commit is contained in:
chenjiahan 2022-01-20 15:53:25 +08:00 committed by neverland
parent 6c64bc33c1
commit ff69fdacc7
3 changed files with 37 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/vant/src/picker/Picker.tsx
View File

@ -21,6 +21,7 @@ import {
BORDER_UNSET_TOP_BOTTOM, BORDER_UNSET_TOP_BOTTOM,
} from '../utils'; } from '../utils';
import { import {
isValuesEqual,
getColumnsType, getColumnsType,
findOptionByValue, findOptionByValue,
formatCascadeColumns, formatCascadeColumns,
@ -115,6 +116,14 @@ export default defineComponent({
fields.value, fields.value,
selectedValues selectedValues
); );
// reset values after cascading
selectedValues.value.forEach((value, index) => {
const options = currentColumns.value[index];
if (!options.find((option) => option[fields.value.value] === value)) {
selectedValues.value[index] = options[0][fields.value.value];
}
});
} }
emit('change', { emit('change', {
@ -265,16 +274,22 @@ export default defineComponent({
watch( watch(
() => props.modelValue, () => props.modelValue,
(value) => { (newValues) => {
selectedValues.value = value; if (!isValuesEqual(newValues, selectedValues.value)) {
} selectedValues.value = newValues;
}
},
{ deep: true }
);
watch(
selectedValues,
(newValues) => {
if (!isValuesEqual(newValues, props.modelValue)) {
emit('update:modelValue', selectedValues.value);
}
},
{ deep: true }
); );
watch(selectedValues, () => {
if (selectedValues.value !== props.modelValue) {
emit('update:modelValue', selectedValues.value);
}
});
useExpose<PickerExpose>({ confirm }); useExpose<PickerExpose>({ confirm });

6
packages/vant/src/picker/README.md
View File

@ -325,9 +325,9 @@ export default {
| Event | Description | Arguments | | Event | Description | Arguments |
| --- | --- | --- | | --- | --- | --- |
| confirm | Emitted when click confirm button | _{ selectedValues, selectedOptions }_ | | confirm | Emitted when the confirm button is clicked | _{ selectedValues, selectedOptions }_ |
| cancel | Emitted when click cancel button | _{ selectedValues, selectedOptions }_ | | cancel | Emitted when the cancel button is clicked | _{ selectedValues, selectedOptions }_ |
| change | Emitted when current option changed | _{ selectedValues, selectedOptions, columnIndex }_ | | change | Emitted when current option is changed | _{ selectedValues, selectedOptions, columnIndex }_ |
### Slots ### Slots

11
packages/vant/src/picker/utils.ts
View File

@ -70,7 +70,6 @@ export function formatCascadeColumns(
if (!cursor && options.length) { if (!cursor && options.length) {
const firstValue = getFirstEnabledOption(options)[fields.value]; const firstValue = getFirstEnabledOption(options)[fields.value];
selectedValues.value[columnIndex] = firstValue;
cursor = findOptionByValue(options, firstValue, fields); cursor = findOptionByValue(options, firstValue, fields);
} }
@ -86,3 +85,13 @@ export function getElementTranslateY(element: Element) {
const translateY = transform.slice(7, transform.length - 1).split(', ')[5]; const translateY = transform.slice(7, transform.length - 1).split(', ')[5];
return Number(translateY); return Number(translateY);
} }
export function isValuesEqual(
valuesA: Array<string | number>,
valuesB: Array<string | number>
) {
return (
valuesA.length === valuesB.length &&
valuesA.every((value, index) => value === valuesB[index])
);
}