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(); } } }