關(guān)于vue2強制刷新,解決頁面不會重新渲染的問題
更新時間：2019年10月29日 09:26:17 作者：zhusf
今天小編就為大家分享一篇關(guān)于vue2強制刷新,解決頁面不會重新渲染的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
問題描述：
在使用Vue框架開發(fā)時，在函數(shù)中改變了頁面中的某個值，在函數(shù)中查看是修改成功了，但在頁面中沒有及時刷新改變后的值；
解決：
運用 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>
以上這篇關(guān)于vue2強制刷新,解決頁面不會重新渲染的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0實現(xiàn)點擊其他區(qū)域關(guān)閉自定義div功能
這篇文章主要介紹了vue2.0實現(xiàn)點擊其他區(qū)域關(guān)閉自定義div功能實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了vue封裝tabs組件案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
使用vuex的時候,出現(xiàn)this.$store為undefined問題
這篇文章主要介紹了使用vuex的時候,出現(xiàn)this.$store為undefined問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
ElementUI Tree 樹形控件的使用并給節(jié)點添加圖標(biāo)
這篇文章主要介紹了ElementUI Tree 樹形控件的使用并給節(jié)點添加圖標(biāo)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了vue中封裝echarts公共組件過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue項目WebPack打包刪除注釋和console，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue中ref、reactive、toRef、toRefs、$refs的基本用法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue中ref、reactive、toRef、toRefs、$refs的基本用法,以及他們之家的區(qū)別,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
監(jiān)聽器是Vue3中非常好用的一個特性,用于監(jiān)聽某個響應(yīng)式變量的變化,本文就來介紹一下Vue3中使用監(jiān)聽器的具體實踐,具有一定的參考價值,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了如何在Vue項目中使用axios處理后端返回的Excel文件流,并提供下載功能,文中通過代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2025-01-01
這篇文章主要為大家詳細介紹了Vue3中實現(xiàn)過渡動畫的一些常用方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10