使用iview的Cascader 级联选择报错：Error in callback for watcher "data": "TypeError: Cannot read property

Bertha 。 2022-04-25 00:48 394阅读 0赞

项目中使用iview的Cascader 级联选择报错  
![使用iview的Cascader 级联选择报错][iview_Cascader]

控件地址：[https://www.iviewui.com/components/cascader][https_www.iviewui.com_components_cascader]

在官网有这么一句话：  
`级联选择对数据有较严格要求，请参照示例的格式使用data，每项数据至少包含 value、label 两项，子集为 children，以此类推。`

官网的一个实例

<template>
        <Cascader :data="data" v-model="value1"></Cascader>
    </template>
    <script>
        export default { 
            data () { 
                return { 
                    value1: [],
                    data: [{ 
                        value: 'beijing',
                        label: '北京',
                        children: [
                            { 
                                value: 'gugong',
                                label: '故宫'
                            },
                            { 
                                value: 'tiantan',
                                label: '天坛'
                            },
                            { 
                                value: 'wangfujing',
                                label: '王府井'
                            }
                        ]
                    }, { 
                        value: 'jiangsu',
                        label: '江苏',
                        children: [
                            { 
                                value: 'nanjing',
                                label: '南京',
                                children: [
                                    { 
                                        value: 'fuzimiao',
                                        label: '夫子庙',
                                    }
                                ]
                            },
                            { 
                                value: 'suzhou',
                                label: '苏州',
                                children: [
                                    { 
                                        value: 'zhuozhengyuan',
                                        label: '拙政园',
                                    },
                                    { 
                                        value: 'shizilin',
                                        label: '狮子林',
                                    }
                                ]
                            }
                        ],
                    }]
                }
            }
        }
    </script>

我的问题在于出现了`"children": null`,将数据中`"children": null`的删除就可以了

[iview_Cascader]: /images/20220210/dcabbf42e93548caa4b82c5f509cfec8.png
[https_www.iviewui.com_components_cascader]: https://www.iviewui.com/components/cascader