vue?頁面卡死,點(diǎn)擊無反應(yīng)的問題及解決
vue 頁面卡死,點(diǎn)擊無反應(yīng)
我在結(jié)合element做表單的時(shí)候，進(jìn)入編輯頁時(shí)，點(diǎn)擊切換不生效，但是value值已改變，就是view視圖層無反應(yīng)，感覺頁面卡死的樣子
我在切換按鈕上，綁定的change事件，執(zhí)行 this.$forceUpdate()強(qiáng)制刷新視圖層
vue 項(xiàng)目頁面卡死原因排查
問題描述
點(diǎn)擊后臺(tái)管理某一菜單發(fā)現(xiàn)直接卡死，沒有其他報(bào)錯(cuò)信息，整個(gè)網(wǎng)頁鼠標(biāo)變?yōu)槭种笭顟B(tài)不能進(jìn)行任何操作
問題排查
首先是通過注釋代碼發(fā)現(xiàn)問題是出在以下代碼中
<basic-container>
<h4>教師指標(biāo)數(shù)據(jù)</h4>
<avue-crud ref="crud"
:data="tableData"
:table-loading="tableLoading"
:option="tableOption"
@refresh-change="refreshChange"
@search-change="searchChange">
<template slot-scope="scope"
slot="menu">
<el-button type="text"
icon="el-icon-view"
size="small"
@click="handleView(scope.row,scope.index)">查看
</el-button>
</template>
</avue-crud>
</basic-container>查看日志輸出
鎖定到問題是數(shù)據(jù)展示的data 需要array 但是卻拿到了Object
將數(shù)據(jù)展示方式tableData改為 table:[]數(shù)組類型進(jìn)行展示即可
data:{
return :{
tableData: []
]
}
getList() {
this.tableLoading = true;
this.tableData=[];
fetchList(this.listQuery).then(response => {
console.log("------------------"+response.data.data)
this.tableData.push(response.data.data) ;
this.tableLoading = false
})
},
小結(jié)
這里有幾個(gè)問題
一個(gè)是avue 版本兼容的問題 貌似舊版本會(huì)兼容這種情況不會(huì)出現(xiàn)卡死的問題
大佬修改框架后出現(xiàn)的這個(gè)問題
另一個(gè)是返回值規(guī)范 如果使用表格 最好都返回list數(shù)組 不要返回單object類型導(dǎo)致出現(xiàn)類似
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了Vue3.0靜態(tài)文件存放路徑與引用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
springboot?vue測試平臺(tái)前端項(xiàng)目查詢新增功能
這篇文章主要為大家介紹了springboot+vue測試平臺(tái)前端項(xiàng)目實(shí)現(xiàn)查詢新增功能，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
這篇文章主要為大家詳細(xì)介紹了Vue中的自定義渲染器和異步渲染的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
vue-cli提供的腳手架只是一個(gè)最基礎(chǔ)的，也可以說是Vue團(tuán)隊(duì)認(rèn)為的工程結(jié)構(gòu)的一種最佳實(shí)踐。這篇文章主要介紹了vue-cli的工程模板與構(gòu)建工具 ,需要的朋友可以參考下2018-09-09
Vue3使用Echarts導(dǎo)致tooltip失效問題及解決方法
Vue3 使用 proxy 對象代理,而 echarts 則使用了大量的全等（===）, 對比失敗從而導(dǎo)致了bug,這篇文章主要介紹了Vue3使用Echarts導(dǎo)致tooltip失效問題及解決方法,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue3無法顯示element-plus問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
一文詳解Vue.js生產(chǎn)環(huán)境文件及優(yōu)化策略
隨著 Vue.js 在前端開發(fā)中的普及,如何高效地將 Vue 項(xiàng)目部署到生產(chǎn)環(huán)境成為了開發(fā)者關(guān)注的重點(diǎn),本文將詳細(xì)解析 Vue.js 生產(chǎn)環(huán)境文件的使用方法、優(yōu)缺點(diǎn)以及優(yōu)化策略,需要的朋友可以參考下2024-12-12
vue3版本網(wǎng)頁小游戲設(shè)計(jì)思路
最近火爆全網(wǎng)的羊了個(gè)羊小程序，背景是根據(jù)官方介紹，“羊了個(gè)羊”是一款闖關(guān)消除小游戲，通關(guān)率不到0.1%。主要玩法為重疊的各類方塊，需要在下方7個(gè)欄內(nèi)完成消除，其特點(diǎn)就是“極難”，也因此成為熱門挑戰(zhàn)，對vue3版本網(wǎng)頁小游戲設(shè)計(jì)思路感興趣的朋友跟隨小編一起看看吧2022-12-12
這篇文章主要介紹了vue之el-form表單校驗(yàn)以及常用正則，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05