關(guān)于vue2強(qiáng)制刷新,解決頁面不會重新渲染的問題

更新時(shí)間：2019年10月29日 09:26:17 作者：zhusf

今天小編就為大家分享一篇關(guān)于vue2強(qiáng)制刷新,解決頁面不會重新渲染的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

問題描述：

在使用Vue框架開發(fā)時(shí)，在函數(shù)中改變了頁面中的某個(gè)值，在函數(shù)中查看是修改成功了，但在頁面中沒有及時(shí)刷新改變后的值；

解決：

運(yùn)用 this.$forceUpdate(); //強(qiáng)制刷新，解決頁面不會重新渲染的問題

例：

<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強(qiáng)制刷新,解決頁面不會重新渲染的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue2.0實(shí)現(xiàn)點(diǎn)擊其他區(qū)域關(guān)閉自定義div功能
這篇文章主要介紹了vue2.0實(shí)現(xiàn)點(diǎn)擊其他區(qū)域關(guān)閉自定義div功能實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-06-06
vue封裝tabs組件案例詳解
這篇文章主要為大家詳細(xì)介紹了vue封裝tabs組件案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
使用vuex的時(shí)候,出現(xiàn)this.$store為undefined問題
這篇文章主要介紹了使用vuex的時(shí)候,出現(xiàn)this.$store為undefined問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
ElementUI Tree 樹形控件的使用并給節(jié)點(diǎn)添加圖標(biāo)
這篇文章主要介紹了ElementUI Tree 樹形控件的使用并給節(jié)點(diǎn)添加圖標(biāo)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
vue中封裝echarts公共組件過程
這篇文章主要介紹了vue中封裝echarts公共組件過程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue項(xiàng)目WebPack打包刪除注釋和console
這篇文章主要介紹了Vue項(xiàng)目WebPack打包刪除注釋和console，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue中ref、reactive、toRef、toRefs、$refs的基本用法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue中ref、reactive、toRef、toRefs、$refs的基本用法,以及他們之家的區(qū)別,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
Vue3中使用監(jiān)聽器的具體實(shí)踐
監(jiān)聽器是Vue3中非常好用的一個(gè)特性,用于監(jiān)聽某個(gè)響應(yīng)式變量的變化,本文就來介紹一下Vue3中使用監(jiān)聽器的具體實(shí)踐,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-12-12
Vue.js中前端如何處理從后端返回的Excel文件流詳解
這篇文章主要介紹了如何在Vue項(xiàng)目中使用axios處理后端返回的Excel文件流,并提供下載功能,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2025-01-01
Vue3中實(shí)現(xiàn)過渡動(dòng)畫的方法小結(jié)
這篇文章主要為大家詳細(xì)介紹了Vue3中實(shí)現(xiàn)過渡動(dòng)畫的一些常用方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-10-10