iview 标签页绑定数组值发生变化，为何前端没有更新？

Z时代
2024-01-10
分类：技术分享

问题：iview 标签页绑定数组值发生变化，为何前端没有更新？

    <Tabs type="card" class="list"  :animated="false"  :value="selectName"  @on-click="delTabs">
        <TabPane v-for="tab in tabs"  :label="tab.level+tab.name" :name="tab.name" >
            <ul id="tab.level" class="listJobs">
                <li v-for="item in tab.functionData"><a v-on:click="handleTabsAdd(item.name,item.guid,tab.level,item.hasChilds)">{{tab.level+'-'+item.name}}</a></li>
            </ul>
        </TabPane>
    </Tabs>
    #点击标签 触发 delTabs 删除 后面的标签页 
    delTabs(name){
           this.$store.dispatch("delTabsList",{name:name});
     }
     #store.js 里面的方法
    delTabsList({commit,state},data){
        commit("SET_TABS",{
            data,
            random: Math.random()
        });
    }
    #问题可能出现的地方
    #mutation.js
    SET_TABS(state,payload){
    var name = payload.data.name;
    console.log(name);
    var index=0;
    for(var i=0;i<state.tabs.length;i++){
        var item=state.tabs[i];    
        if(name == item.name){
            index=i;
            break;
        }
    }
    state.tabs.splice(index+1);
    console.log(index);
    console.log(state.tabs);
  }

刚看到有朋友回复了，谢谢！

我把其他的也拷贝过来。

home.vue

    <Tag v-for="(item,index) in selectNames" :key="item.key" :name="item.key" closable @on-close="handleClose">{{ item.name }}</Tag>
    <Tabs type="card" class="list"  :animated="false"  :value="selectName"  @on-click="delTabs">
        <TabPane v-for="(stab,index) in tabs"  :label="stab.label" :name="stab.name" >
            <ul id="stab.level" class="listJobs">
                <li v-for="item in stab.functionData"><a v-on:click="handleTabsAdd(item.name,item.guid,stab.level,item.hasChilds)">{{stab.level+'-'+item.name}}</a></li>
            </ul>
        </TabPane>
    </Tabs></div>

</template>

.list { padding:5px 10px; }
.listJobs{}.listJobs li{ float: left; line-height: 30px; margin-right: 10px; }

</style>

export default {
    data () {
        return {
            selectNames: [
                // { key:'0150', name:'工程师'},
                // { key:'0516', name:'总监'}
            ],
            selectName:''
        }
    },
    mounted() {
        console.log(this.$store.state.length);
        this.$store.dispatch("loadtopFunction");
    },
    created: function(){
    },
    computed:{
        tabs(){
           console.log('again');
           console.log(this.$store.state.tabs);
           return this.$store.state.tabs;
        }
    },
    methods: {
        handleClose(event, name){
            const index = this.selectNames.indexOf(name);
            this.selectNames.splice(index, 1);
            console.log('已选择的:'+this.selectNames);
        },
        delTabs(name){
           this.$store.dispatch("delTabsList",{name:name});
           //
           //
           // var offset=0;
           // for(var j=0;j<this.$store.state.tabs.length;j++){
           //      var item=this.$store.state.tabs[j];
           //      if(item.name==name){
           //          offset = j;
           //      }
           // }
           //this.$store.state.tabs.splice(offset+1);
           // console.log(this.$store.state.tabs);
           // this.$store.dispatch('delTabsList2',{offset:offset});
        },
        handleTabsAdd (name,guid,level,hasChilds) {
            if(hasChilds==true){
                this.selectName=name;
               // console.log(name);
                this.$store.dispatch("loadFunction",{name:name,guid:guid,level:level,hasChilds:hasChilds});
            }else{
               var row={
                    key:guid,
                    name:name
               };
               this.selectNames.push(row);
            }     
        }
    }}

</script>

奇怪的是，如果我把

改成
<TabPane v-for="(stab,index) in tabs" :label="stab.label+tabs.length" :name="stab.name" >
效果就对了。

问题到底在哪里出错了？？

回答：

问题已经得到间接解决。

    <Tabs type="card" class="list"  :animated="false"  :value="selectName"  @on-click="delTabs">
        <TabPane v-for="stab in tabs" :key="tabs.length" :label="stab.label" :name="stab.name" >
            <ul id="stab.level" class="listJobs">
                <li v-for="item in stab.functionData"><a v-on:click="handleTabsAdd(item.name,item.guid,stab.level,item.hasChilds)">{{stab.level+'-'+item.name}}</a></li>
            </ul>
        </TabPane>
    </Tabs>

关键就是tab 组件加添加了一个key, 也不知道为什么这样就可以了。