vue,数据模型的数组中出现重复值时,报错Uncaught (in promise) TypeError

vue1.0.28,问题已经明确的捕捉到,但原因不明,数组模型如下:
HTML

<!-- 一级导航 -->
        <ul class="nav">
            <li v-for="el in sort" v-bind:class="{ 'active': sortCurrent==$index }" @click="changeNav($index,0)" v-if="(navStatusCurrent==0&&el.isProm)||(navStatusCurrent==1&&el.isNew)||(navStatusCurrent==2)"><img :src="el.picUrl">{{el.sName}}</li>
        </ul>
        
<!-- 二级导航 -->
        <ul class="goodsSubnav">
            <li v-for="el in sort[sortCurrent].list" v-bind:class="{ 'active': sortSubCurrent==$index }" @click="changeNav(sortCurrent,$index)">{{el}}</li>
        </ul>
vm = new Vue({
    el: 'html',
    data: {
        sort:[
            {
                isProm:true,isNew:false,sName:"啤酒",picUrl:"../images/c1.jpg",
                list:["最近购买","百威系列","雪津系列","红石梁系列","维雪系列","大雪系列","晓雪系列","花河系列"]
            },

            {
                isProm:false,isNew:false,sName:"红酒",picUrl:"../images/c2.jpg",
                list:["最近购买","红酒系列1","红酒系列2","红酒系列3","红酒系列4"]
            },

            {
                isProm:true,isNew:true,sName:"碳酸饮料",picUrl:"../images/c3.jpg",
                list:["最近购买","乳制品系列","乳制品系列"]
            }....
        ]

第三条数据中出现了2个“乳制品系列”,于是报错:

vue.min.js:6 Uncaught (in promise) TypeError: Cannot read property 'removeChild' of null(…)

将此处改为不重复数据,问题即消失,这应该说明HTML引用部分没啥问题吧?请问报错是何原因?

回答:

另一个朋友告诉我答案和原因了:二级导航li中加了track-by=”$index”,问题解决。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注