vue:实现二级联级菜单

<script>
    Vue.config.productinoTip = false;
    new Vue({
        el: "#app",

        created() {
            this.getXq();
        },

        data() {
            return {
                xqArr: [],
                xqVal: "",
                zhouArr: [],
            };
        },

        methods: {
            getXq: function() {
                new Promise(function(resolve, reject) {
                        $.ajax({
                            url: './xq.json',
                            success: function(res) {
                                resolve(res)
                            },
                            error: function(err) {
                                reject(err)
                            }
                        })

                    })
                    .then(res => {
                        this.xqArr = res.xqArr;
                    })
            },
            changeXq() {
                console.log(this.xqVal);
                if (this.xqVal == "地球") {
                    new Promise(function(resolve, reject) {
                            $.ajax({
                                url: './dqzhou.json',
                                success: function(res) {
                                    resolve(res)
                                },
                                error: function(err) {
                                    reject(err)
                                }
                            })
                        })
                        .then(res => {
                            this.zhouArr = res.dqzhou;
                        })
                } else if (this.xqVal == "月球") {
                    new Promise(function(resolve, reject) {
                            $.ajax({
                                url: './yqzhou.json',
                                success: function(res) {
                                    resolve(res)
                                },
                                error: function(err) {
                                    reject(err)
                                }
                            })
                        })
                        .then(res => {
                            this.zhouArr = res.yqzhou;
                        })
                }
            }
        },

    })
</script>

xq.json文件内容

{
    "xqArr": ["地球", "月球"]
}

dqzhou.json文件内容

{
    "dqzhou": ["亚洲", "非洲", "美洲"]
}

yqzhou.json内容

{
    "yqzhou": ["陨石", "嫦娥", "玉兔"]
}