vue 报错 Cannot read property 'children' of undefined

Question

    <script type="text/ecmascript-6">
        import BScroll from 'better-scroll';
        const ERR_OK = 0;
        export default {
            props: {
                seller: {
                    type: Object
                }
            },
            data() {
                return {
                    goods: []
                };
            },
            created() {
                this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
                this.$http.get('/api/goods').then((response) => {
                    response = response.body;
                    if (response.errno === ERR_OK) {
                        this.goods = response.data;
                        this.$nextTick(() => {
                            this._initScroll();
                        });
                    }
                });
            },
            methods: {
                _initScroll() {
                    this.menuScroll = new BScroll(this.$refs.menuWrapper, {});
                    this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {});
                }
            }
        };
    </script>

报错：vue.common.js?e881:435 TypeError: Cannot read property 'children' of undefined

Answer 1

把dom里面的ref改掉。ref="menuWrapper",ref="foodsWrapper",不要写成menu-wrapper形式就能解决问题

Answer 2

//this指针的问题吧

created() {
    var _this=this;
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
    this.$http.get('/api/goods').then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
            _this.goods = response.data;
            _this.$nextTick(() => {
                _this._initScroll();
            });
        }
    });
},

Answer 3

建议你在赋值给goods前输出一下response，看是不是json对象，也许你会发现什么（我之前照vue-resource官方的操作，貌似是string，不保证你的也是这个原因）

Answer 4

我做到这一步也出现这样的问题了，不知道是什么原因、

Answer 5

@阿翊翊翊翊 按照你的方法这样写还是不行，报更多的错

刚找到了方法，如下
DOM
<div class="menu-wrapper" ref="menu-wrapper">
<div class="foods-wrapper" ref="foods-wrapper">

JS
methods: {

  _initScroll() {
    this.menuScroll = new BScroll(this.$refs['menu-wrapper'], {});
    this.foodsScroll = new BScroll(this.$refs['foods-wrapper'], {});
  }
}

Answer 6

试了一下 setTimeout 执行没有这个问题的 不知道什么原因

Answer 7

请问怎么解决？ref那种方式也解决不了