分享
三行代码  ›  专栏  ›  技术社区  ›  ImCoder

呈现时出错:“TypeError:无法读取未定义的属性”

  •  0
  • ImCoder  · 技术社区  · 5 天前

    [Vue warn]:呈现错误:“TypeError:无法读取未定义的属性'object'”

    这个v字很好用

                      <div class="horizontal-menu-item robot-header-horizontalMenu-menuItem" v-for="(item, index) in this.topMenu" :key="index">
                            <p class="horizontal-menu-item-link" v-on:mouseover="isMouseover1=true" v-on:mouseleave="isMouseover1=false">{{item.name}}</p>
                            <div class="horizontal-menu-detail" v-bind:style="isMouseover1 ? 'display: block' : 'display: none;'" v-on:mouseover="isMouseover1=true" v-on:mouseleave="isMouseover1=false">
                                <div class="horizontal-menu-title-container gg-d-offset-1 gg-d-22 gg-w-22">
                                    <h2 class="horizontal-menu-title robot-header-horizontalMenu-title">
                                        <i class="icon-container gg-icon gg-icon-menu-phone"></i>
                                        <a href="https://www.gittigidiyor.com/elektronik" title="Elektronik Kategorisi">
                                            Elektronik Kategorisi
                                            <i class="gg-icon gg-icon-pagination-arrow-right"></i>
                                        </a>
                                    </h2>
                                </div>
                                <div class="horizontal-menu-column gg-d-offset-1 gg-d-7 gg-w-5 gg-uw-4" >
                                    <div class="robot-header-horizontalMenu-subItem sub-item">
    

                                        <h3 class="sub-title robot-header-horizontalMenu-subTitle" v-for="(item2, index2) in this.object.topMenuItem1" :key="index2">
                                            <a class="sub-title-link" href="https://www.gittigidiyor.com/cep-telefonu-ve-aksesuar" title="Cep Telefonu ve Aksesuar">{{item2.id}}</a>
                                        </h3>
                                    </div>
                                </div>
                            </div>
                        </div>
    

    Vue工作得很好。我正在用axios获取数据。并使用v-for在模板中显示。我可以得到 很容易。使用相同的方法获取 顶菜单项1 . 但当我在模板中使用v-for时,出现了typer错误。我的失败在哪里?

    data() {
            return {
                //top menü
                topMenu: null,
                topMenuItem1: null,
                topMenuItem2: null,
            }
        },
    
    
        mounted: function mounted () {
            axios
                .post("http://localhost:3000/listCategoriesByMID", { id: 1})
                .then(response => {
                    this.topMenuItem1 = response.data;
                    console.log("topMenuItem1: " + this.topMenuItem1 + " " + JSON.stringify(this.topMenuItem1));
                });
            axios
                .post("http://localhost:3000/listCategoriesByMID", { id: 2})
                .then(response => {
                    this.topMenuItem2 = response.data;
                    console.log("topMenuItem2: " + this.topMenuItem2 + " " + JSON.stringify(this.topMenuItem2));
                });
    
            axios
                .post("http://localhost:3000/listMainCategories")
                .then(response => {
                    this.topMenu = response.data;
                    console.log("topMenu: " + this.topMenu + " " + JSON.stringify(this.topMenu));
                });
        },
    
    1 回复  |  直到 5 天前
        1
  •  2
  •   ellisdod    5 天前

    一般规则是永远不要使用 this 在模板中: possible explanation

    ths.object.topMenuItem1 topMenuItem1