vue.js - 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"，问题解决。

这篇关于vue.js - vue，数据模型的数组中出现重复值时，报错Uncaught (in promise) TypeError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！