means that there are two tables, a commodity table and a version table. To put the contents of these two tables into a table, each row is a commodity name, and the attributes in each row include multiple version names. The specific table is similar to the following
I wrote the code, but reported an error TypeError: Cannot read property "ver_list" of undefined,. I"m sure it"s not because the v-for version is wrong, because if I delete the v-for product on th and replace it with the v-for version on ul, how should I change it?
the data goes like this
goods_list [{goods_id:1,goods_name:" book"} {goods_id:1,goods_name:" pen"}]
ver_list [{ver_id:1,goods_id:2,ver_name:" pencil"} {ver_id:2,goods_id:2,ver_name:" pen"} {ver_id:3,goods_id:1,ver_name:" classics"}]
the code I wrote is
<template id="list_box">
<div>
<table class="table table-hover">
<tr>
<th>ID</th>
<th></th>
<th></th>
<th></th>
</tr>
<!-- -->
<tr v-for="(info,index) in this.$parent.goods_list" >
<td>{{index+1}}</td>
<td>{{info.goods_name}}</td>
<td>
<!--
TypeError: Cannot read property "ver_list" of undefined
-->
<ul v-for="(info1,index1) in this.$parent.ver_list"
v-if="info1.goods_id==info.goods_id">
<li>{{info1.ver_name}}</li>
</ul>
</td>
<td>
<a href=""></a>
</td>
</tr>
</table>
</div>
</template>
structure is
new Vue({
router,
el:".container",
data:{
goods_list:[],
ver_list:[],
},
created(){
this.goods_list = JSON.parse(localStorage.getItem("goods_list"))
if (this.goods_list==null) {
this.goods_list = []
}
this.ver_list = JSON.parse(localStorage.getItem("ver_list"))
if (this.ver_list==null) {
this.ver_list = []
}
console.log(this.ver_list)
},
})
this is how router is defined
{
path:"/",
component:{
template:"-sharplist_box",
}
}