From 5adaeb704d98f5e22eb9248be0a8e54eebc3a182 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 18 Aug 2021 10:05:44 +0800
Subject: [PATCH] docs(DropdownMenu): fix demo state (#9278)

---
 src/dropdown-menu/README.md       | 35 +++++++++++++++----------------
 src/dropdown-menu/README.zh-CN.md | 27 ++++++++++++------------
 2 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
index 586c9873e..560a15842 100644
--- a/src/dropdown-menu/README.md
+++ b/src/dropdown-menu/README.md
@@ -23,20 +23,18 @@ app.use(DropdownItem);
 
 ```html
 <van-dropdown-menu>
-  <van-dropdown-item v-model="state.value1" :options="option1" />
-  <van-dropdown-item v-model="state.value2" :options="option2" />
+  <van-dropdown-item v-model="value1" :options="option1" />
+  <van-dropdown-item v-model="value2" :options="option2" />
 </van-dropdown-menu>
 ```
 
 ```js
-import { reactive } from 'vue';
+import { ref } from 'vue';
 
 export default {
   setup() {
-    const state = reactive({
-      value1: 0,
-      value2: 'a',
-    });
+    const value1 = ref(0);
+    const value2 = ref('a');
     const option1 = [
       { text: 'Option1', value: 0 },
       { text: 'Option2', value: 1 },
@@ -49,7 +47,8 @@ export default {
     ];
 
     return {
-      state,
+      value1,
+      value2,
       option1,
       option2,
     };
@@ -61,16 +60,16 @@ export default {
 
 ```html
 <van-dropdown-menu>
-  <van-dropdown-item v-model="state.value" :options="option" />
+  <van-dropdown-item v-model="value" :options="option" />
   <van-dropdown-item title="Title" ref="item">
     <van-cell center title="Title">
       <template #right-icon>
-        <van-switch v-model="state.switch1" size="24" active-color="#ee0a24" />
+        <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
       </template>
     </van-cell>
     <van-cell center title="Title">
       <template #right-icon>
-        <van-switch v-model="state.switch2" size="24" active-color="#ee0a24" />
+        <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
       </template>
     </van-cell>
     <div style="padding: 5px 16px;">
@@ -83,16 +82,14 @@ export default {
 ```
 
 ```js
-import { ref, reactive } from 'vue';
+import { ref } from 'vue';
 
 export default {
   setup() {
     const item = ref(null);
-    const state = reactive({
-      value: 0,
-      switch1: false,
-      switch2: false,
-    });
+    const value = ref(0);
+    const switch1 = ref(false);
+    const switch2 = ref(false);
     const options = [
       { text: 'Option1', value: 0 },
       { text: 'Option2', value: 1 },
@@ -104,7 +101,9 @@ export default {
 
     return {
       item,
-      state,
+      value,
+      switch1,
+      switch2,
       options,
       onConfirm,
     };
diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md
index bdccbeb6c..6fe9d3df5 100644
--- a/src/dropdown-menu/README.zh-CN.md
+++ b/src/dropdown-menu/README.zh-CN.md
@@ -23,8 +23,8 @@ app.use(DropdownItem);
 
 ```html
 <van-dropdown-menu>
-  <van-dropdown-item v-model="state.value1" :options="option1" />
-  <van-dropdown-item v-model="state.value2" :options="option2" />
+  <van-dropdown-item v-model="value1" :options="option1" />
+  <van-dropdown-item v-model="value2" :options="option2" />
 </van-dropdown-menu>
 ```
 
@@ -33,10 +33,8 @@ import { reactive } from 'vue';
 
 export default {
   setup() {
-    const state = reactive({
-      value1: 0,
-      value2: 'a',
-    });
+    const value1 = ref(0);
+    const value2 = ref('a');
     const option1 = [
       { text: '全部商品', value: 0 },
       { text: '新款商品', value: 1 },
@@ -49,7 +47,8 @@ export default {
     ];
 
     return {
-      state,
+      value1,
+      value2,
       option1,
       option2,
     };
@@ -85,16 +84,14 @@ export default {
 ```
 
 ```js
-import { ref, reactive } from 'vue';
+import { ref } from 'vue';
 
 export default {
   setup() {
     const item = ref(null);
-    const state = reactive({
-      value: 0,
-      switch1: false,
-      switch2: false,
-    });
+    const value = ref(0);
+    const switch1 = ref(false);
+    const switch2 = ref(false);
     const options = [
       { text: '全部商品', value: 0 },
       { text: '新款商品', value: 1 },
@@ -106,7 +103,9 @@ export default {
 
     return {
       item,
-      state,
+      value,
+      switch1,
+      switch2,
       options,
       onConfirm,
     };