fix(cascader): fix error display of async data

example/project.config.json

@@ -38,7 +38,8 @@
     "packNpmRelationList": [],
     "minifyWXSS": true,
     "showES6CompileOption": false,
-    "ignoreUploadUnusedFiles": true
+    "ignoreUploadUnusedFiles": true,
+    "condition": false
   },
   "compileType": "miniprogram",
   "libVersion": "2.6.5",
@@ -333,6 +334,12 @@
           "pathName": "pages/divider/index",
           "query": "",
           "scene": null
+        },
+        {
+          "name": "cascader",
+          "pathName": "pages/cascader/index",
+          "query": "",
+          "scene": null
         }
       ]
     }

packages/cascader/index.ts

@@ -24,7 +24,6 @@ VantComponent({
     title: String,
     value: {
       type: String,
-      observer: 'updateValue',
     },
     placeholder: {
       type: String,
@@ -37,7 +36,6 @@ VantComponent({
     options: {
       type: Array,
       value: [],
-      observer: 'updateOptions',
     },
     swipeable: {
       type: Boolean,
@@ -68,6 +66,16 @@ VantComponent({
     textKey: FieldName.TEXT,
     valueKey: FieldName.VALUE,
     childrenKey: FieldName.CHILDREN,
+    innerValue: '',
+  },
+
+  watch: {
+    options() {
+      this.updateTabs();
+    },
+    value(newVal) {
+      this.updateValue(newVal);
+    },
   },
 
   created() {
@@ -75,11 +83,7 @@ VantComponent({
   },
 
   methods: {
-    updateOptions(val, oldVal) {
-      const isAsync = !!(val.length && oldVal.length);
-      this.updateTabs(isAsync);
-    },
-    updateValue(val) {
+    updateValue(val: string) {
       if (val !== undefined) {
         const values = this.data.tabs.map(
           (tab: ITab) => tab.selected && tab.selected[this.data.valueKey]
@@ -88,6 +92,9 @@ VantComponent({
           return;
         }
       }
+
+      this.innerValue = val;
+
       this.updateTabs();
     },
     updateFieldNames() {
@@ -121,11 +128,19 @@ VantComponent({
         }
       }
     },
-    updateTabs(isAsync = false) {
-      const { options, value } = this.data;
+    updateTabs() {
+      const { options } = this.data;
+      const { innerValue } = this;
 
-      if (value !== undefined) {
-        const selectedOptions = this.getSelectedOptionsByValue(options, value);
+      if (!options.length) {
+        return;
+      }
+
+      if (innerValue !== undefined) {
+        const selectedOptions = this.getSelectedOptionsByValue(
+          options,
+          innerValue
+        );
 
         if (selectedOptions) {
           let optionsCursor = options;
@@ -167,17 +182,6 @@ VantComponent({
         }
       }
 
-      // 异步更新
-      if (isAsync) {
-        const { tabs } = this.data;
-        tabs[tabs.length - 1].options =
-          options[options.length - 1][this.data.childrenKey];
-        this.setData({
-          tabs,
-        });
-        return;
-      }
-
       this.setData({
         tabs: [
           {
@@ -239,12 +243,16 @@ VantComponent({
 
       const selectedOptions = tabs.map((tab) => tab.selected).filter(Boolean);
 
+      const value = option[valueKey];
+
       const params = {
-        value: option[valueKey],
+        value,
         tabIndex,
         selectedOptions,
       };
 
+      this.innerValue = value;
+
       this.$emit('change', params);
 
       if (!option[childrenKey]) {