關(guān)于vue2強(qiáng)制刷新,解決頁(yè)面不會(huì)重新渲染的問(wèn)題
更新時(shí)間：2019年10月29日 09:26:17 作者：zhusf
今天小編就為大家分享一篇關(guān)于vue2強(qiáng)制刷新,解決頁(yè)面不會(huì)重新渲染的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
問(wèn)題描述：
在使用Vue框架開發(fā)時(shí)，在函數(shù)中改變了頁(yè)面中的某個(gè)值，在函數(shù)中查看是修改成功了，但在頁(yè)面中沒有及時(shí)刷新改變后的值；
解決：
運(yùn)用 this.$forceUpdate(); //強(qiáng)制刷新，解決頁(yè)面不會(huì)重新渲染的問(wèn)題
例：
<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)制刷新,解決頁(yè)面不會(huì)重新渲染的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
現(xiàn)在vue項(xiàng)目基本上都是使用axios進(jìn)行請(qǐng)求操作,下面這篇文章主要給大家介紹了關(guān)于Vue與Axios的傳參方式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
詳解Vue如何將多個(gè)空格被合并顯示成一個(gè)空格
這篇文章主要為大家詳細(xì)介紹了在Vue中如何將多個(gè)空格被合并顯示成一個(gè)空格,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
Vue2.0父組件與子組件之間的事件發(fā)射與接收實(shí)例代碼
這篇文章主要介紹了Vue2.0父組件與子組件之間的事件發(fā)射與接收實(shí)例代碼,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了vue中的scope使用詳解,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了Vue腳手架中的 render 理解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10
這篇文章主要給大家介紹了關(guān)于element-ui表格如何自適應(yīng)高度的相關(guān)資料,Element UI的Table組件默認(rèn)情況下是沒有自適應(yīng)高度的,文中給大家介紹了解決的辦法,需要的朋友可以參考下2023-08-08
最近接觸了一個(gè)項(xiàng)目，vue怎么在不同屏幕上做根據(jù)不同屏幕大小適配，本文就詳細(xì)的來(lái)介紹一下，感興趣的可以了解一下2021-09-09
vue3+vite+vant4手機(jī)端項(xiàng)目實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于vue3+vite+vant4手機(jī)端項(xiàng)目實(shí)戰(zhàn)的相關(guān)資料,Vue3是一種前端開發(fā)框架,它的目標(biāo)是提供更好的性能和開發(fā)體驗(yàn),需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制餅圖，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
Vue標(biāo)簽屬性動(dòng)態(tài)傳參并拼接字符串的操作方法
這篇文章主要介紹了Vue標(biāo)簽屬性動(dòng)態(tài)傳參并拼接字符串的操作方法,我們需要根據(jù)傳入值的類型,在placeholder屬性賦值"請(qǐng)輸入長(zhǎng)度",“請(qǐng)輸入寬度”,"請(qǐng)輸入厚度"等提示字符,本文通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11