vue怎么把兩個(gè)表里的東西放在一個(gè)table里面

就是有兩個(gè)表，一個(gè)商品表，一個(gè)版本表，要把這兩個(gè)表的內(nèi)容放到一個(gè)table里，每一行是一個(gè)商品名，每一行里面的屬性包括多個(gè)版本名，具體表格類似下面
圖片描述

我寫了代碼，但是報(bào)錯(cuò)TypeError: Cannot read property 'ver_list' of undefined ，我確定不是因?yàn)関-for版本寫錯(cuò)了，因?yàn)槿绻野裻h上的v-for商品刪掉換成ul上的v-for版本就沒(méi)問(wèn)題，我該怎么改？

數(shù)據(jù)是這樣的
goods_list[{goods_id:1,goods_name:'書'}{goods_id:1,goods_name:'筆'}]
ver_list[{ver_id:1,goods_id:2,ver_name:'鉛筆'}{ver_id:2,goods_id:2,ver_name:'筆'}{ver_id:3,goods_id:1,ver_name:'名著'}]

我寫的代碼是

    <template id="list_box">
    <div>
        <table class="table table-hover">
            <tr>
                <th>ID</th>
                <th>商品名稱</th>
                <th>屬性</th>
                <th>操作</th>
            </tr>
            <!-- 這里沒(méi)報(bào)錯(cuò) -->
            <tr v-for="(info,index) in this.$parent.goods_list"  >
                <td>{{index+1}}</td>
                <td>{{info.goods_name}}</td>
                <td>
                    <!-- 這里報(bào)錯(cuò)，
                    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>

結(jié)構(gòu)是

    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)
        },
    })

router是這么定義的

                {
                path:'/',
                component:{  
                    template:'#list_box',    
                } 
            }

回答

編輯回答

安若晴

可以貼出你的數(shù)據(jù)么，因?yàn)楦鶕?jù)報(bào)錯(cuò)信息來(lái)看應(yīng)該是你的數(shù)據(jù)里面沒(méi)有 ver_list 這個(gè)屬性

原因應(yīng)該是雙重for中this的指向題
我改了下你看看
主要是吧 this.$parent 當(dāng)做一個(gè)變量來(lái)處理，現(xiàn)在可以達(dá)到你要的效果了

path:'/add',
                    component:{
                        data(){
                            return {
                                goods_id:'',
                                goods_name:'',
                                ver_id:'',
                                ver_name:'',
                                ver_introduction:'',
                                color_name:'',
                                goods_price:'',

                                ver_list1:[],
                                color_list:[],
                                $parent: this.$parent
                            }
                            
                        },

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商品管理</title>
    <link rel="stylesheet" type="text/css" >
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
    <style>
        .ver_box li{width: 33%;float: left;}
        .border{border: 1px solid black}
    </style>
</head>
<body>

    <div class="container">
        <h2>商品管理</h2>
        <router-link to="/"  class="btn btn-primary">列表</router-link>
        <router-link to="/add"  class="btn btn-info">添加</router-link>

        <router-view></router-view>
    </div>
    <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 $parent.goods_list"  >
                    <td>{{index+1}}</td>
                    <td>{{info.goods_name}}</td>
                    <td>
                        
                    <!-- 加上這個(gè)就報(bào)錯(cuò)-->
                        <p v-model="1+1"></p>
                        <ul v-for="(info1,index1) in $parent.ver_list">
                            <li>{{info1.ver_name}}</li>
                        </ul> 
                    </td>
                    <td>
                        <a href="">修改</a>
                    </td>
                </tr>

<!--                   測(cè)試，直接打印ver_list，沒(méi)問(wèn)題 -->
                <tr v-for="(info1,index1) in $parent.ver_list"  >
                    <td>{{index1+1}}</td>
                    <td>{{info1.ver_name}}</td>
                    <td>
                        
                    </td>
                    <td>
                        <a href="">修改</a>
                    </td>
                </tr>  
            </table> 
    </template>
    <template id="add_box">
        <div>
            <form action="" class="from">
                <div class="form-group">
                    <label >商品名稱</label>
                    <input type="text" class="form-control"   v-model="goods_name"></div>

                <div class="form-group">
                    <label >
                        版本
                        <a @click="add_version()" class="btn btn-info">添加版本</a>
                    </label>
                    <ul class="ver_box">
                        <li v-for="(ver_info,index) in ver_list1">
                            版本{{index+1}}：
                            <input   type="text" v-model="ver_info.ver_name">
                        </li>
                    </ul>
                
                </div> 
                <div class="form-group" style="clear: both">
                    <input type="button" :disabled="goods_name=='' " class="btn btn-primary" value="保存" v-on:click="save()"></div>

            </form>
        </div>
    </template>
         
    </template>
    <script type="text/javascript">
        var router = new VueRouter({
            routes:[ 
                {
                    path:'/add',
                    component:{
                        data(){
                            return {
                                goods_id:'',
                                goods_name:'',
                                ver_id:'',
                                ver_name:'',
                                ver_introduction:'',
                                color_name:'',
                                goods_price:'',

                                ver_list1:[],
                                color_list:[],
                                $parent: this.$parent
                            }
                            
                        },
                        methods:{
                            save:function () {
                                debugger
                                var goods_name = this.goods_name
                                var ver_list = this.ver_list1
                                var n=ver_list.length
                                this.$parent.goods_list.push({
                                    goods_name
                                }) 
                                for(var i=0;n>0;i++){
                                    console.log(ver_list[i].ver_name)
                                    this.$parent.ver_list.push({
                                    ver_name:ver_list[i].ver_name
                                }) 
                                    n--
                                }
                                localStorage.setItem('goods_list',JSON.stringify(this.$parent.goods_list))
                                localStorage.setItem('ver_list',JSON.stringify(this.$parent.ver_list))
                                this.$router.push('/')
                            },
                            add_version:function () {
                                // 添加版本方法
                                this.ver_list1.push({
                                    ver_name:'',
                                })
                            },

                        },
                        template:'#add_box'
                    }
                },
                {
                    path:'/',
                    component:{
                        template:'#list_box',        
                    } 
                }
            ]
        })
        new Vue({
            router,
            el:".container", 
            data:{
                goods_list:[],
                ver_list:[]
            }, 
            created(){
                debugger
                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)
            },
            methods:{
                
            }
        })
    </script>
</body>
</html>

2018年3月6日 08:05