vue中用v-for的item屬性作為v-if組件渲染條件時不起作用


vue中用v-for的item屬性作為v-if組件渲染條件時不起作用

上篇講到了使用組件遞歸實現樹形菜單,現在要來實現點擊切換菜單項的展開收起狀態。

我的想法時,在處理菜單列表數據時,給每個有子菜單的菜單項添加一個showChild屬性,然后在Menu組件渲染時,通過v-if綁定item.showChild來控制子菜單項的顯示與隱藏:

<ul class="menu">
        <li class="menu-item" v-for="item in list" ::key="item.name">
            <div class="menu-item-content" @click="toggleShow(item)">
                <span v-if="item.children && item.children.length">📂</span>
               <span class="menu-item-name">{{item.name}} </span>
            </div>
        <Menu v-if="item.showChild && item.children && item.children.length" :list="item.children"></Menu>
    </li>
</ul>

點擊切換展開和收起狀態:

methods: {
      toggleShow(item) {
         if (item.children && item.children.length) {
            item.showChild = !item.showChild;
        }
    }
}

然后我發現點擊根本不起作用,試着打印了一下點擊的item的showChild,發現是改變了的,但是沒有在頁面是實時渲染新的值。

后來我在網上搜索了相關資料,終於找到了原因:

因為數據層次太多,render函數沒有自動更新,需手動強制刷新。

這里說的強制渲染,就是通過調用this.$forceUpdate()來手動強制渲染已改變的頁面數據並刷新頁面,所以在toggleShow方法后面添加這一行代碼就可以了:

methods: {
      toggleShow(item) {
         if (item.children && item.children.length) {
            item.showChild = !item.showChild;
            this.$forceUpdate();
        }
    }
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM