vue2的tab欄切換不能自動重新整理如何解決?
阿新 • • 發佈:2018-12-11
this.$forceUpdate(); //強制重新整理,解決頁面不會重新渲染的問題
<template> <div> <el-card> <ul class="list-style-none title-list"> <li v-for="item in titleList" v-bind:class="{'active':item.active}" @click="activeItem(item)">{{item.name}}</li> </ul> </el-card> </div> </template> <script> export default { name: "approval-list", data() { return { titleList: [ {id: 1, name: 'Property', active: true}, {id: 2, name: 'Tower'}, {id: 3, name: 'Unit'}, {id: 4, name: 'Listing'}, {id: 5, name: 'Agent'}, ], } }, methods: { activeItem(_item){ this.titleList.forEach(item=>{ item.active=false; }); _item.active = true; console.log(this.titleList); this.$forceUpdate(); } } } </script> <style scoped> ul.title-list { display: flex; } ul.title-list > li { padding: 20px 0px; margin: 0px 20px; } .active { border-bottom: 2px solid #FF0000; color: #FF0000; } </style>