[Vue 警告]:渲染错误:“TypeError:无法读取未定义的属性‘对象’”
这个 v-for 很好用
<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 显示。我可以轻松获得topMenu。使用相同的方法获取topMenuItem1。但是当我在模板中使用 v-for 时,出现打字错误。我的失败在哪里?
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));
});
},
一般规则是永远不要this
在模板中使用:可能的解释
所以ths.object.topMenuItem1
改为topMenuItem1
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句