vue實現(xiàn)加載頁面自動觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))
更新時間：2022年07月02日 08:56:05 作者：不說廢話斯基
這篇文章主要介紹了vue實現(xiàn)加載頁面自動觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
加載頁面自動觸發(fā)函數(shù)
實例
methods:{
onCreate:async function() {
const router = useRouter()
const route = useRoute()
const { id = '', f = 1 } = route.query
console.log("======="+id)
const res = await reqGetOrderNumByClientId({
clientId: id
})
console.log("-------------------"+res+res.msg)
if (res.code === 200) {
await router.push({
path: '/app/create',
query: {
id: id,
f: f
}
})
} else {
Dialog.alert({
title: '提示',
message: res.msg,
showCancelButton: false,
confirmButtonText: '確定'
})
}
}
},
mounted:function () { //自動觸發(fā)寫入的函數(shù)
this.onCreate();
}
觸發(fā)模板為
methods: {
? ? ? ? ? demo() {
? ? ? ? ??
? ? ? ? ? }
? ? ? },
?mounted: function () {
? alert('頁面一加載，就會彈出此窗口')
?}要在fuction（） 前面用async修飾、外部調用前面用await修飾，不然就會獲取不到數(shù)據(jù)。
頁面加載時,觸發(fā)某個函數(shù)的方法
需要在加載頁面的時候調用生成驗證碼的click事件函數(shù)
解決方法如下
利用Vue中的mounted
mounted:function(){
this.createcode();//需要觸發(fā)的函數(shù)
}
//下面是createcode函數(shù)
createcode(){
var self = this;
axios.post("/verifycode",{name:this.name,id:this.id}).then(function(res){
//console.log(res);
var url= JSON.parse(res.data.code64);
//console.log(url)
self.urlIMg = url.data.base64Code;
});
},以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了在vue中axios設置timeout超時的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue樣式疊層z-index不起作用的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了vue-router 組件復用問題詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
element-ui中實現(xiàn)tree子節(jié)點部分選中時父節(jié)點也選中
這篇文章主要介紹了element-ui中實現(xiàn)tree子節(jié)點部分選中時父節(jié)點也選中的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue el-upload單圖片上傳功能實現(xiàn),本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue中如何下載excel流文件及設置下載文件名，對vue感興趣的同學，可以參考下2021-05-05
本文章向大家介紹vue組件中的數(shù)據(jù)共享，主要包括vue組件中的數(shù)據(jù)共享使用實例、應用技巧、基本知識點總結和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下2022-11-11
這篇文章主要介紹了淺談vue 多個變量同時賦相同值互相影響，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue3中使用@vueuse/core中的圖片懶加載案例詳解
這篇文章主要介紹了vue3中使用@vueuse/core中的圖片懶加載案例,本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue3中多個彈窗同時出現(xiàn)的解決思路,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02