關(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)文章
現(xiàn)在vue項目基本上都是使用axios進行請求操作,下面這篇文章主要給大家介紹了關(guān)于Vue與Axios的傳參方式的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了在Vue中如何將多個空格被合并顯示成一個空格,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
Vue2.0父組件與子組件之間的事件發(fā)射與接收實例代碼
這篇文章主要介紹了Vue2.0父組件與子組件之間的事件發(fā)射與接收實例代碼,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了vue中的scope使用詳解,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了Vue腳手架中的 render 理解,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
這篇文章主要給大家介紹了關(guān)于element-ui表格如何自適應(yīng)高度的相關(guān)資料,Element UI的Table組件默認情況下是沒有自適應(yīng)高度的,文中給大家介紹了解決的辦法,需要的朋友可以參考下2023-08-08
最近接觸了一個項目，vue怎么在不同屏幕上做根據(jù)不同屏幕大小適配，本文就詳細的來介紹一下，感興趣的可以了解一下2021-09-09
vue3+vite+vant4手機端項目實戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于vue3+vite+vant4手機端項目實戰(zhàn)的相關(guān)資料,Vue3是一種前端開發(fā)框架,它的目標是提供更好的性能和開發(fā)體驗,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細介紹了如何利用Vue和Echarts實現(xiàn)繪制餅圖，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
這篇文章主要介紹了Vue標簽屬性動態(tài)傳參并拼接字符串的操作方法,我們需要根據(jù)傳入值的類型,在placeholder屬性賦值"請輸入長度",“請輸入寬度”,"請輸入厚度"等提示字符,本文通過實例代碼介紹的非常詳細,需要的朋友參考下吧2023-11-11