vue.js - Vue+iview报TypeError: this.$parent.updateGutter is not a function

问题描述

问 题

今天对之前写的代码拆分了下component，然后就遇到
TypeError: this.$parent.updateGutter is not a function

详细信息如下：

[Vue warn]: Error in mounted hook: "TypeError: this.$parent.updateGutter is not a function"

found in

---> <ICol>
       <AllZoneComponent> at /Users/SkyWather/Documents/Program/CodeLab/tw-web/app/static/src/views/components/all_zone.vue
         <Row>
           <Index> at /Users/SkyWather/Documents/Program/CodeLab/tw-web/app/static/src/views/index.vue
             <App> at /Users/SkyWather/Documents/Program/CodeLab/tw-web/app/static/src/app.vue
               <Root>
               
TypeError: this.$parent.updateGutter is not a function
    at VueComponent.updateGutter (iview.js:11436)
    at VueComponent.boundFn [as updateGutter] (vue.esm.js:165)
    at VueComponent.mounted (iview.js:11440)
    at callHook (vue.esm.js:2556)
    at Object.insert (vue.esm.js:3383)
    at invokeInsertHook (vue.esm.js:5210)
    at VueComponent.patch [as __patch__] (vue.esm.js:5375)
    at VueComponent.Vue._update (vue.esm.js:2323)
    at VueComponent.updateComponent (vue.esm.js:2439)
    at Watcher.get (vue.esm.js:2778)

报错组件代码：

<template>
    <div>
        <div class="layout-content">
            <Col span="6">
                <Card :bordered="false" class="add-zone">
                    <Button type="text" long @click="click_add_zone" icon="plus-round" size="large">新增空间</Button>
                </Card>
            </Col>

            <Col span="6" v-for="item in zones" :key="item">
                <Card :bordered="false">
                    <p slot="title">
                        <Icon type="ios-albums-outline"></Icon>
                        {{ item.name }}
                    </p>
                    <a href="#" slot="extra" @click="changeLimit">
                        <Button type="dashed" shape="circle" icon="ios-heart-outline" size="small">关注
                        </Button>
                    </a>
                    <div class="zone-desc">
                        <img src="../../images/logo.png">
                    </div>
                <p>{{ item.desc }}</p>
            </Card>
            </Col>
        </div>

        <Modal
                v-model="show_add_zone"
                title="添加空间"
                @on-ok="add_zone"
                @on-cancel="cancel">
            <Input v-model="zone_name">
                <span slot="prepend">名称</span>
            </Input>
            <br>
            <Input v-model="zone_desc">
                <span slot="prepend">描述</span>
            </Input>
        </Modal>
    </div>
</template>
<style>
</style>
<script>
    export default{
        data(){
            return{
                show_add_zone: false,
                zone_name: "",
                zone_desc: "",
                zones: [],
            }
        },
        mounted() {
            this.get_zone();
        },
        methods: {
            get_zone() {
                let _self = this;
                api.all_zone.get().then(function(response){
                    _self.zones = response.data.result["objects"];
                    console.log(_self.zones);
                }, function (response) {
                    _self.$Notice.error("查询空间失败！");
                    return false;
                }
            )},
            click_add_zone() {
                this.show_add_zone = true;
            },
            init_data() {
                this.zone_name = "";
                this.zone_desc = "";
            },
            add_zone() {
                let _self = this;
                var _data = {
                    name: _self.zone_name,
                    desc: _self.zone_desc,
                }
                api.my_zone.save(_data).then(function(response){
                    _self.$Notice.success({
                        title: '添加成功！',
                    });
                    _self.init_data();
                    _self.get_zone();
                }), function (response) {
                    _self.$Notice.error({
                            title: '添加失败！',
                    });
                    return false;
                }
            },
            cancel () {
                this.init_data();
            },
            changeLimit(){
                console.log("follow");
            },
        }
    }
</script>

引用组件代码：

<template>
    <div class="layout">
        <header-component/>
        <br>
        <Row v-if="have_zone" class="view">
            <my-zone-component/>
        </Row>
        <Row v-else class="zone">
            <all-zone-component/>
        </Row>
        <div class="layout-copy">
            2011-2016 &copy; TalkingData
        </div>
    </div>
</template>
<script>
    import HeaderComponent from './components/header.vue'
    import AllZoneComponent from './components/all_zone.vue'
    import MyZoneComponent from './components/my_zone.vue'

    export default {
        components:{
            'header-component': HeaderComponent,
            'all-zone-component': AllZoneComponent,
            'my-zone-component': MyZoneComponent,
        },
        data () {
            return {
                have_zone: false,
            }
        },
        mounted () {
            console.log(this.getZone());
            if (this.getZone()) {
                this.have_zone = true;
            }else {
                this.have_zone = false;
            }
        },
        methods: {
            getZone() {
                let _self = this;
                api.my_zone.get().then(function(response){
                    return response.data.result;
                }, function (response) {
                    this.$Notice.error("查询空间失败！");
                    return false;
                }
            )},
        }
    }
</script>

没有进行任何包的版本升级。目前使用上暂时没导致不能用的问题，但是console一直报这个error，请教下具体原因和怎么解决？

问题原因：

刚刚仔细调了下，发现<Col span="6" v-for="item in zones" :key="item">这里面循环多少个就出现多少次错误，然后想到parent，就找到问题了，外层少了row。应该是col元素必须在row元素内

解决方案

把你自己写的代码截个图，不截图怎么发现问题？

这篇关于vue.js - Vue+iview报TypeError: this.$parent.updateGutter is not a function的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！