From f30185e642164658b688c6bddbbf4dde253cba9d Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 11 Oct 2021 21:04:24 +0800
Subject: [PATCH] chore: using string arguments on directives (#9659)

---
 packages/vant/src/address-edit/AddressEdit.tsx    | 2 +-
 packages/vant/src/cascader/Cascader.tsx           | 2 +-
 packages/vant/src/coupon-list/CouponList.tsx      | 2 +-
 packages/vant/src/dropdown-item/DropdownItem.tsx  | 2 +-
 packages/vant/src/tab/test/insert.spec.tsx        | 4 ++--
 packages/vant/src/tabs/Tabs.tsx                   | 4 +---
 packages/vant/src/tree-select/test/index.spec.tsx | 4 ++--
 7 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/vant/src/address-edit/AddressEdit.tsx b/packages/vant/src/address-edit/AddressEdit.tsx
index 501f32d11..69d794e8f 100644
--- a/packages/vant/src/address-edit/AddressEdit.tsx
+++ b/packages/vant/src/address-edit/AddressEdit.tsx
@@ -402,7 +402,7 @@ export default defineComponent({
             )}
           </div>
           <Popup
-            v-model={[state.showAreaPopup, 'show']}
+            v-model:show={state.showAreaPopup}
             round
             teleport="body"
             position="bottom"
diff --git a/packages/vant/src/cascader/Cascader.tsx b/packages/vant/src/cascader/Cascader.tsx
index 27d44ca98..7cf757db3 100644
--- a/packages/vant/src/cascader/Cascader.tsx
+++ b/packages/vant/src/cascader/Cascader.tsx
@@ -280,7 +280,7 @@ export default defineComponent({
 
     const renderTabs = () => (
       <Tabs
-        v-model={[state.activeTab, 'active']}
+        v-model:active={state.activeTab}
         animated
         class={bem('tabs')}
         color={props.activeColor}
diff --git a/packages/vant/src/coupon-list/CouponList.tsx b/packages/vant/src/coupon-list/CouponList.tsx
index 013e5d5cd..68f9160e9 100644
--- a/packages/vant/src/coupon-list/CouponList.tsx
+++ b/packages/vant/src/coupon-list/CouponList.tsx
@@ -200,7 +200,7 @@ export default defineComponent({
     return () => (
       <div class={bem()}>
         {renderExchangeBar()}
-        <Tabs v-model={[state.tab, 'active']} class={bem('tab')} border={false}>
+        <Tabs v-model:active={state.tab} class={bem('tab')} border={false}>
           {renderCouponTab()}
           {renderDisabledTab()}
         </Tabs>
diff --git a/packages/vant/src/dropdown-item/DropdownItem.tsx b/packages/vant/src/dropdown-item/DropdownItem.tsx
index fda6c6a09..0ecb67b51 100644
--- a/packages/vant/src/dropdown-item/DropdownItem.tsx
+++ b/packages/vant/src/dropdown-item/DropdownItem.tsx
@@ -174,7 +174,7 @@ export default defineComponent({
           onClick={onClickWrapper}
         >
           <Popup
-            v-model={[state.showPopup, 'show']}
+            v-model:show={state.showPopup}
             class={bem('content')}
             overlay={overlay}
             position={direction === 'down' ? 'top' : 'bottom'}
diff --git a/packages/vant/src/tab/test/insert.spec.tsx b/packages/vant/src/tab/test/insert.spec.tsx
index 8e4adbacf..e6f4a6d6e 100644
--- a/packages/vant/src/tab/test/insert.spec.tsx
+++ b/packages/vant/src/tab/test/insert.spec.tsx
@@ -7,7 +7,7 @@ test('should render correctly after inserting a tab', async () => {
   const wrapper = mount({
     render() {
       return (
-        <Tabs v-model={[this.active, 'active']}>
+        <Tabs v-model:active={this.active}>
           <Tab title="1">1</Tab>
           {this.insert && (
             <div>
@@ -37,7 +37,7 @@ test('should render correctly after inserting a tab with name', async () => {
   const wrapper = mount({
     render() {
       return (
-        <Tabs v-model={[this.active, 'active']} onChange={onChange}>
+        <Tabs v-model:active={this.active} onChange={onChange}>
           {this.insert && (
             <Tab title="bar" name="bar">
               bar
diff --git a/packages/vant/src/tabs/Tabs.tsx b/packages/vant/src/tabs/Tabs.tsx
index 1687e4db5..f37c27e41 100644
--- a/packages/vant/src/tabs/Tabs.tsx
+++ b/packages/vant/src/tabs/Tabs.tsx
@@ -371,9 +371,7 @@ export default defineComponent({
           renderTitle={item.$slots.title}
           activeColor={props.titleActiveColor}
           inactiveColor={props.titleInactiveColor}
-          onClick={(event: MouseEvent) => {
-            onClickTab(item, index, event);
-          }}
+          onClick={(event: MouseEvent) => onClickTab(item, index, event)}
           {...pick(item, [
             'dot',
             'badge',
diff --git a/packages/vant/src/tree-select/test/index.spec.tsx b/packages/vant/src/tree-select/test/index.spec.tsx
index d21e1617c..c195dfbf0 100644
--- a/packages/vant/src/tree-select/test/index.spec.tsx
+++ b/packages/vant/src/tree-select/test/index.spec.tsx
@@ -151,7 +151,7 @@ test('should allow to select multiple items when activeId is array', async () =>
     render() {
       return (
         <TreeSelect
-          v-model={[this.activeId, 'activeId']}
+          v-model:activeId={this.activeId}
           items={this.items}
           mainActiveIndex={0}
         />
@@ -185,7 +185,7 @@ test('should limit the selected item number when using max prop', async () => {
     render() {
       return (
         <TreeSelect
-          v-model={[this.activeId, 'activeId']}
+          v-model:activeId={this.activeId}
           max={1}
           items={this.items}
           mainActiveIndex={0}