楼上说的都没错，你做个兜底处理；
:data-original="imgs.length&&imgs[current].img"

初始时imgs还是空的，直接imgs[current].img == undefined.img => 报错

emmm 你有思考过空数据的问题吗？
在你数据未加载成功的时候！你的页面渲染就完成了开始给你报错！
解决的办法：
1.computed 获取的计算属性作为输出的结果，默认为 ""
2.created 初始化数据，请求必须是同步的，保证初始化成功的时候有数据

这样获取报错
数据是这样的

报错

在方法里面
console.log(this.imgs[this.current].img)可以取到值
在页面中获取就报错，语法应该是不对的

类似百度这种效果
https://baike.baidu.com/item/%E4%BA%A7%E5%93%81%E6%A0%87%E8%AF%86/10882045?fr=aladdin
在线求教，谢谢

模拟的数据

export const islandDetail = opation => {
    const template = {
        code: 200,
        data: {
            'list': [
                {
                    id: '1',
                    title: '湖泊概况',
                    'children': [
                        {
                            id: '1.1',
                            title: '位置境域',
                            children: []
                        },
                        {
                            id: '1.2',
                            title: '地质构造',
                            children: []
                        },
                        {
                            id: '1.3',
                            title: '流域概况',
                            children: []
                        }
                    ]
                },
                {
                    id: '2',
                    title: '气候特征',
                    'children': []
                },
                {
                    id: '3',
                    title: '水文特征',
                    'children': [
                        {
                            id: '3.1',
                            title: '水文水质',
                            children: []
                        },
                        {
                            id: '3.2',
                            title: '水位',
                            children: []
                        },
                        {
                            id: '3.3',
                            title: '生态特征',
                            children: []
                        },
                        {
                            id: '3.4',
                            title: '形态特点',
                            children: []
                        }
                    ]
                },
                {
                    id: '4',
                    title: '自然资源',
                    'children': []
                },
                {
                    id: '5',
                    title: '治理开发',
                    'children': [
                        {
                            id: '5.1',
                            title: '旅游开发',
                            children: []
                        },
                        {
                            id: '5.2',
                            title: '环境治理',
                            children: []
                        },
                        {
                            id: '5.3',
                            title: '水利工程',
                            children: []
                        }
                    ]
                },
                {
                    id: '6',
                    title: '最佳旅游时间',
                    'children': []
                },
                {
                    id: '7',
                    title: '治理开发',
                    'children': [
                        {
                            id: '7.1',
                            title: '外部交通',
                            children: []
                        },
                        {
                            id: '7.2',
                            title: '内部交通',
                            children: []
                        }
                    ]
                },
            ]
        },
        message: 'Success'
    }
    return Mock.mock(template)
}

页面布局

组件获取数据

islandDetail().then(res=> {
                this.directory = res.data.list
                this.directory.forEach((item,index) => {
                    item.order = index+1
                })
                //转化为一维数组
                for(let i= 0; i < this.directory.length; i++) {
                    if(this.directory[i].children.length) {
                        this.directory = this.directory.slice(0,i+1).concat(this.directory[i].children,this.directory.slice(i+1))
                        delete this.directory[i].children
                    }
                }
                //平分
                let arr2d = [this.directory1, this.directory2, this.directory3, this.directory4]
                if (this.directory.length >= 4) {
                    let count = 0;
                    for (let arr of arr2d) {
                        count++;
                        if (count != 4) {
                            arr.push(...this.directory.slice(Math.round(this.directory.length / 4) * (count - 1), Math.round(this.directory.length / 4) * count));
                        } else {
                            arr.push(...this.directory.slice(Math.round(this.directory.length / 4) * (count - 1)));
                        }
                    }
                }
             })

vue获取到20条数据，如何平分展示？

类似百度这样的效果

现在的情况

右侧高度固定，隐藏的部分手动滚动右边可以看到 不会自动随着左侧的内容滚动显示在可视区域，求教

// 这个是异步的问题 需要把Promise实例和结果返回出去
// 在其他地方调用getUnreadNumFn方法可以拿到Promise实例 并添加回调链
getUnreadNumFn(){
    return getUnreadNum().then(res=>{//要把Promise对象返回
        ...
        return res// 需要把res返回
    })
}

// 子组件
...
this.$parent.getUnreadNumFn().then(res=>{
    console.log(this.$parent.news)
})
...

父组件

子组件

接口返回是1，但是打印是删除前的2，我想获取在子组件调的接口返回的值，求教