list vue 删除后页面渲染_vue2强制刷新，解决页面不会重新渲染的问题

问题描述：

在使用Vue框架开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值；

解决：

运用 this.$forceUpdate();  //强制刷新，解决页面不会重新渲染的问题

例：

• {{item.name}}

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

}

}

}

ul.title-list {

display: flex;

}

ul.title-list > li {

padding: 20px 0px;

margin: 0px 20px;

}

.active {

border-bottom: 2px solid #FF0000;

color: #FF0000;

}