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