diff --git a/packages/vant/src/picker/README.md b/packages/vant/src/picker/README.md
index 66ea84263..a871e2d9f 100644
--- a/packages/vant/src/picker/README.md
+++ b/packages/vant/src/picker/README.md
@@ -38,7 +38,7 @@ export default {
const columns = [
{ text: 'Delaware', value: 'Delaware' },
{ text: 'Florida', value: 'Florida' },
- { text: 'Georqia', value: 'Georqia' },
+ { text: 'Wenzhou', value: 'Wenzhou' },
{ text: 'Indiana', value: 'Indiana' },
{ text: 'Maine', value: 'Maine' },
];
@@ -89,7 +89,7 @@ export default {
const columns = [
{ text: 'Delaware', value: 'Delaware' },
{ text: 'Florida', value: 'Florida' },
- { text: 'Georqia', value: 'Georqia' },
+ { text: 'Wenzhou', value: 'Wenzhou' },
{ text: 'Indiana', value: 'Indiana' },
{ text: 'Maine', value: 'Maine' },
];
@@ -111,6 +111,36 @@ export default {
};
```
+### v-model
+
+Using `v-model` to bind selected values.
+
+```html
+
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+ setup() {
+ const columns = [
+ { text: 'Delaware', value: 'Delaware' },
+ { text: 'Florida', value: 'Florida' },
+ { text: 'Wenzhou', value: 'Wenzhou' },
+ { text: 'Indiana', value: 'Indiana' },
+ { text: 'Maine', value: 'Maine' },
+ ];
+ const selectedValues = ref(['Wenzhou']);
+
+ return {
+ columns,
+ selectedValues,
+ };
+ },
+};
+```
+
### Multiple Columns
```html
@@ -213,7 +243,7 @@ export default {
const columns = [
{ text: 'Delaware', value: 'Delaware', disabled: true },
{ text: 'Florida', value: 'Florida' },
- { text: 'Georqia', value: 'Georqia' },
+ { text: 'Wenzhou', value: 'Wenzhou' },
];
return { columns };
},
diff --git a/packages/vant/src/picker/README.zh-CN.md b/packages/vant/src/picker/README.zh-CN.md
index c7859af63..1f352d1ae 100644
--- a/packages/vant/src/picker/README.zh-CN.md
+++ b/packages/vant/src/picker/README.zh-CN.md
@@ -120,6 +120,38 @@ export default {
};
```
+### 双向绑定
+
+通过 `v-model` 可以绑定当前选中项的 `values`,修改 `v-model` 绑定的值时,Picker 的选中状态也会随之改变。
+
+`v-model` 的值是一个数组,数组的第一位对应第一列选中项的 `value`,第二位对应第二列选中项的 `value`,以此类推。
+
+```html
+
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+ setup() {
+ const columns = [
+ { text: '杭州', value: 'Hangzhou' },
+ { text: '宁波', value: 'Ningbo' },
+ { text: '温州', value: 'Wenzhou' },
+ { text: '绍兴', value: 'Shaoxing' },
+ { text: '湖州', value: 'Huzhou' },
+ ];
+ const selectedValues = ref(['Wenzhou']);
+
+ return {
+ columns,
+ selectedValues,
+ };
+ },
+};
+```
+
### 多列选择
`columns` 属性可以通过二维数组的形式配置多列选择。
diff --git a/packages/vant/src/picker/demo/data.ts b/packages/vant/src/picker/demo/data.ts
index f89e1e72b..549d4053d 100644
--- a/packages/vant/src/picker/demo/data.ts
+++ b/packages/vant/src/picker/demo/data.ts
@@ -9,7 +9,7 @@ export const basicColumns = {
'en-US': [
{ text: 'Delaware', value: 'Delaware' },
{ text: 'Florida', value: 'Florida' },
- { text: 'Georqia', value: 'Georqia' },
+ { text: 'Wenzhou', value: 'Wenzhou' },
{ text: 'Indiana', value: 'Indiana' },
{ text: 'Maine', value: 'Maine' },
],
@@ -209,6 +209,6 @@ export const disabledColumns = {
'en-US': [
{ text: 'Delaware', value: 'Delaware', disabled: true },
{ text: 'Florida', value: 'Florida' },
- { text: 'Georqia', value: 'Georqia' },
+ { text: 'Wenzhou', value: 'Wenzhou' },
],
};
diff --git a/packages/vant/src/picker/demo/index.vue b/packages/vant/src/picker/demo/index.vue
index 6215cefb1..baef585d1 100644
--- a/packages/vant/src/picker/demo/index.vue
+++ b/packages/vant/src/picker/demo/index.vue
@@ -1,4 +1,5 @@