vue data有值,但是頁面{{}} 取不到值的解決
我的問題出在js引入的順序不對，導(dǎo)致不能正常顯示vue中的值
正確的順序應(yīng)該是：
先引入vue的js--------html代碼-----最后引入自己寫的js
補充知識：vue中子組件的created、mounted生命周期鉤子中獲取不到props中的值問題
父子組件通信
這個很簡單，父組件中使用v-bind綁定傳送，子組件使用props接收即可 。
例如：在父組件中
<template> <div> <div :Data="Data"></div> </div> </template>
<script>
data(){
return {
Data: [10,20,30]
}
},
</script>
子組件中：
export default{
props:{
type:Array,
default(){
return []
}
}
}
這種情況下你的Data值是固定的，子組件的 methods 中想要取到props中的值，直接使用 this.chartData 即可 。
但是有的情況下，你的Data 里面的值并不是固定的，而是動態(tài)獲取的，這種情況下，你會發(fā)現(xiàn) methods 中是取不到你的 Data 的，或者取到的一直是默認(rèn)值。
解決辦法：
這種情況我是使用watch處理
監(jiān)聽 Data 的值，當(dāng)它由空轉(zhuǎn)變時就會觸發(fā)，這時候就能取到了，拿到值后要做的處理方法也需要在 watch 里面執(zhí)行。
export default {
props: ['Data'],
data(){
return {
cData: []
}
},
watch: {
//正確給 Data 賦值的 方法
chartData: function(newVal,oldVal){
this.cData = newVal; //newVal即是chartData
newVa l&& this.draw(); //newVal存在的話執(zhí)行draw函數(shù)
}
},
methods: {
draw(){
//執(zhí)行其他邏輯
}
},
mounted() {
//在created、mounted這樣的生命周期, 給 this.Data賦值會失敗,錯誤賦值方法
}
}
//總結(jié)
出現(xiàn)這種情況的原因, 因為父組件中要傳遞的 props 屬性 是通過 發(fā)生ajax請求回來的, 請求的這個過程是需要時間的，但是子組件的渲染要快于ajax請求過程，所以此時 created 、 mounted 這樣的只會執(zhí)行一次的生命周期鉤子，已經(jīng)執(zhí)行了，但是 props 還沒有流進來（子組件），所以只能拿到默認(rèn)值。
以上這篇vue data有值,但是頁面{{}} 取不到值的解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue渲染失敗的幾種原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要給大家介紹了關(guān)于vue中data改變后讓視圖同步更新的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了vue路徑寫法之關(guān)于./和@/的區(qū)別，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
一文詳解Vue.js生產(chǎn)環(huán)境文件及優(yōu)化策略
隨著 Vue.js 在前端開發(fā)中的普及,如何高效地將 Vue 項目部署到生產(chǎn)環(huán)境成為了開發(fā)者關(guān)注的重點,本文將詳細(xì)解析 Vue.js 生產(chǎn)環(huán)境文件的使用方法、優(yōu)缺點以及優(yōu)化策略,需要的朋友可以參考下2024-12-12
Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐
本文主要介紹了Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
Vue3 組件間通信之mitt實現(xiàn)任意組件間通信的步驟
mitt 主要有4個API：emit（觸發(fā)某個事件）、on（綁定事件）、off（解綁某個事件）、all（獲取所有綁定的事件）,這篇文章主要介紹了Vue3 組件間通信之mitt實現(xiàn)任意組件間通信,需要的朋友可以參考下2024-05-05
Vue Element UI 表單自定義校驗規(guī)則及使用
這篇文章主要介紹了Vue Element UI 表單自定義效驗規(guī)則及使用,文中通過代碼介紹了常見表單效驗規(guī)則，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
Element-UI的el-table組件是一個非常強大的表格組件,它提供了多種常見的表格功能,如排序、篩選、分頁、自定義列模板等,這篇文章主要給大家介紹了關(guān)于element-ui?el-table表格固定表頭的相關(guān)資料,需要的朋友可以參考下2024-05-05
本文主要介紹了vue 面包屑導(dǎo)航組件封裝，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue3中reactive丟失響應(yīng)式的問題解決(避大坑!)
這篇文章主要給大家介紹了關(guān)于Vue3中reactive丟失響應(yīng)式的問題解決,vue3中reactive定義的引用類型直接賦值導(dǎo)致數(shù)據(jù)失去響應(yīng)式 ,需要的朋友可以參考下2023-07-07