fix(Cascader): should watch options deeply (#7777)

* fix(Cascader): should watch options deeply

* docs: fix

src/cascader/README.md

@@ -54,8 +54,8 @@ export default {
     };
   },
   methods: {
-    onFinish(params) {
-      const { selectedOptions } = params;
+    onFinish({ selectedOptions }) {
+      this.show = false;
       this.fieldValue = selectedOptions.map((option) => option.text).join('/');
     },
   },
@@ -74,6 +74,63 @@ export default {
 />
 ```
 
+### Async Options
+
+```html
+<van-field
+  is-link
+  readonly
+  label="Area"
+  :value="fieldValue"
+  placeholder="Select Area"
+  @click="show = true"
+/>
+<van-popup v-model="show" round position="bottom">
+  <van-cascader
+    v-model="cascaderValue"
+    title="Select Area"
+    @close="show = false"
+    @change="onChange"
+    @finish="onFinish"
+  />
+</van-popup>
+```
+
+```js
+export default {
+  data() {
+    return {
+      show: false,
+      fieldValue: '',
+      cascaderValue: '',
+      options: [
+        {
+          text: 'Zhejiang',
+          value: '330000',
+          children: [],
+        },
+      ],
+    };
+  },
+  methods: {
+    onChange({ value }) {
+      if (value === this.options[0].value) {
+        setTimeout(() => {
+          this.options[0].children = [
+            { text: 'Hangzhou', value: '330100' },
+            { text: 'Ningbo', value: '330200' },
+          ];
+        }, 500);
+      }
+    },
+    onFinish({ selectedOptions }) {
+      this.show = false;
+      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
+    },
+  },
+};
+```
+
 ## API
 
 ### Props

src/cascader/README.zh-CN.md

@@ -62,8 +62,8 @@ export default {
   },
   methods: {
     // 全部选项选择完毕后，会触发 finish 事件
-    onFinish(params) {
-      const { selectedOptions } = params;
+    onFinish({ selectedOptions }) {
+      this.show = false;
       this.fieldValue = selectedOptions.map((option) => option.text).join('/');
     },
   },
@@ -84,6 +84,65 @@ export default {
 />
 ```
 
+### 异步加载选项
+
+可以监听 `change` 事件并动态设置 `options`，实现异步加载选项。
+
+```html
+<van-field
+  is-link
+  readonly
+  label="地区"
+  :value="fieldValue"
+  placeholder="请选择地区"
+  @click="show = true"
+/>
+<van-popup v-model="show" round position="bottom">
+  <van-cascader
+    v-model="cascaderValue"
+    title="请选择地区"
+    @close="show = false"
+    @change="onChange"
+    @finish="onFinish"
+  />
+</van-popup>
+```
+
+```js
+export default {
+  data() {
+    return {
+      show: false,
+      fieldValue: '',
+      cascaderValue: '',
+      options: [
+        {
+          text: '浙江省',
+          value: '330000',
+          children: [],
+        },
+      ],
+    };
+  },
+  methods: {
+    onChange({ value }) {
+      if (value === this.options[0].value) {
+        setTimeout(() => {
+          this.options[0].children = [
+            { text: '杭州市', value: '330100' },
+            { text: '宁波市', value: '330200' },
+          ];
+        }, 500);
+      }
+    },
+    onFinish({ selectedOptions }) {
+      this.show = false;
+      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
+    },
+  },
+};
+```
+
 ## API
 
 ### Props

src/cascader/demo/index.vue

@@ -40,6 +40,27 @@
         />
       </van-popup>
     </demo-block>
+
+    <demo-block card :title="t('asyncOptions')">
+      <van-field
+        is-link
+        readonly
+        :label="t('area')"
+        :value="async.result"
+        :placeholder="t('selectArea')"
+        @click="async.show = true"
+      />
+      <van-popup v-model="async.show" round position="bottom">
+        <van-cascader
+          v-model="async.value"
+          :title="t('selectArea')"
+          :options="async.options"
+          @close="async.show = false"
+          @change="loadDynamicOptions"
+          @finish="onFinish('async', $event)"
+        />
+      </van-popup>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -54,12 +75,36 @@ export default {
       options: zhCNOptions,
       selectArea: '请选择地区',
       customColor: '自定义颜色',
+      asyncOptions: '异步加载选项',
+      asyncOptions1: [
+        {
+          text: '浙江省',
+          value: '330000',
+          children: [],
+        },
+      ],
+      asyncOptions2: [
+        { text: '杭州市', value: '330100' },
+        { text: '宁波市', value: '330200' },
+      ],
     },
     'en-US': {
       area: 'Area',
       options: enUSOptions,
       selectArea: 'Select Area',
       customColor: 'Custom Color',
+      asyncOptions: 'Async Options',
+      asyncOptions1: [
+        {
+          text: 'Zhejiang',
+          value: '330000',
+          children: [],
+        },
+      ],
+      asyncOptions2: [
+        { text: 'Hangzhou', value: '330100' },
+        { text: 'Ningbo', value: '330200' },
+      ],
     },
   },
 
@@ -75,10 +120,28 @@ export default {
         value: null,
         result: '',
       },
+      async: {
+        show: false,
+        value: null,
+        result: '',
+        options: [],
+      },
     };
   },
 
+  created() {
+    this.async.options = this.t('asyncOptions1');
+  },
+
   methods: {
+    loadDynamicOptions({ value }) {
+      if (value === '330000') {
+        setTimeout(() => {
+          this.async.options[0].children = this.t('asyncOptions2');
+        }, 500);
+      }
+    },
+
     onFinish(type, { value, selectedOptions }) {
       const result = selectedOptions.map((option) => option.text).join('/');
       this[type] = {

src/cascader/index.js

@@ -29,8 +29,9 @@ export default createComponent({
   },
 
   watch: {
-    options() {
-      this.updateTabs();
+    options: {
+      deep: true,
+      handler: 'updateTabs',
     },
 
     value(value) {

src/cascader/test/__snapshots__/demo.spec.js.snap

@@ -22,5 +22,15 @@ exports[`renders demo correctly 1`] = `
     </div>
     <!---->
   </div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+      <div class="van-cell__title van-field__label"><span>地区</span></div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择地区" class="van-field__control"></div>
+      </div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <!---->
+  </div>
 </div>
 `;