vue在data中定義變量后依舊報(bào)undefined的解決

更新時(shí)間：2024年03月24日 16:19:48 作者：weixin_43939111

這篇文章主要介紹了vue在data中定義變量后依舊報(bào)undefined的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

在data定義變量后依舊報(bào)undefined

之前跑的好好項(xiàng)目突然data中報(bào)undefined，在mounted打印也出不來(lái)。

最后排查，還是個(gè)人粗心問(wèn)題：

變量太多，自己多加變量時(shí)忘了賦值，導(dǎo)致整個(gè)運(yùn)行報(bào)錯(cuò)。

data(){
	return {
		a:"信息1",
		b:"信息2",
		c
	}
},
mounted(){
	console.log(this.a)//undefined
}

如上代碼，雖然我在末尾加變量，es6語(yǔ)法會(huì)默認(rèn)c為c:c，在編譯器里認(rèn)通過(guò)。

但是，c沒(méi)有初始值卡住之后會(huì)影響其他data變量的獲取，打印a、b的值都是undefined

vue data定義的變量使用另一變量

在寫(xiě)代碼的時(shí)候，遇到一個(gè)問(wèn)題，我想使用data里面的一個(gè)變量，賦值給data里面的另一個(gè)變量。

直接賦不行 latitude: latitude, 不行，latitude: this.latitude, 也不行，上網(wǎng)查了一下，可以通過(guò)computed和mounted來(lái)實(shí)現(xiàn)，成功了。

data() {
    return {
      longitude: 120.42,
      latitude: 36.09,
      covers: [
        {
          // latitude: latitude, 不行
          // latitude: this.latitude, 也不行
          // latitude: 0,
          // longitude: 0,
          iconPath: '../../static/logo.png',
          width: 25,
          height: 25
        }
      ],
    };
  },

方法一：computed

注釋的部分為其它的方法。

computed: {
    // computeLon(){
    //   return this.covers[0].longitude = this.longitude;
    // },
    // computeLat(){
    //   return  this.covers[0].latitude = this.latitude;
    // }
    computeLonLat(){
      // this.covers[0].longitude = this.longitude;
      // this.covers[0].latitude = this.latitude;
      this.$set(this.covers[0], 'longitude', this.longitude);
      this.$set(this.covers[0], 'latitude', this.latitude)
      return
    }
  },

方法二： mounted

mounted() {
    this.$set(this.covers[0], 'longitude', this.longitude);
    this.$set(this.covers[0], 'latitude', this.latitude)
  },

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

ElementUI下拉框選擇后不顯示值問(wèn)題及解決
這篇文章主要介紹了ElementUI下拉框選擇后不顯示值問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02
Vue實(shí)現(xiàn)固定定位圖標(biāo)滑動(dòng)隱藏效果
移動(dòng)端頁(yè)面，有時(shí)候會(huì)出現(xiàn)一些固定定位在底部圖標(biāo)，比如購(gòu)物車(chē)等。這篇文章主要介紹了Vue制作固定定位圖標(biāo)滑動(dòng)隱藏效果,需要的朋友可以參考下
2019-05-05
關(guān)于element-ui日期時(shí)間選擇器選不中12小時(shí)以后的時(shí)間詳解
在之前做個(gè)一個(gè)組件頁(yè)面中,引用了element-ui組件的日期選擇器,遇到的一個(gè)小問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于element-ui日期時(shí)間選擇器選不中12小時(shí)以后時(shí)間的相關(guān)資料,需要的朋友可以參考下
2022-08-08
vue3實(shí)現(xiàn)國(guó)際化的過(guò)程與遇到的問(wèn)題詳解
像很多大型的網(wǎng)址,特別是跨國(guó)際等公司網(wǎng)頁(yè),訪問(wèn)來(lái)自世界各地用戶(hù),所以網(wǎng)頁(yè)的國(guó)際化極其重要的需求,這篇文章主要給大家介紹了關(guān)于vue3實(shí)現(xiàn)國(guó)際化的過(guò)程與遇到的問(wèn)題的相關(guān)資料,需要的朋友可以參考下
2022-05-05
Vue打包后頁(yè)面出現(xiàn)空白解決辦法
本文主要介紹了Vue打包后頁(yè)面出現(xiàn)空白解決辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
Vue中v-cloak和v-pre指令使用詳解
在 Vue.js 中,v-cloak 和 v-pre 是兩個(gè)比較特殊但非常有用的指令,它們主要用于處理模板編譯和顯示相關(guān)的問(wèn)題,本文就來(lái)詳細(xì)的介紹一下Vue中v-cloak和v-pre指令使用,感興趣的可以了解一下
2026-01-01
Vue自動(dòng)生成組件示例總結(jié)
在Vue中,我們可以使用unplugin-generate-component-name插件自動(dòng)基于目錄名稱(chēng)生成組件名稱(chēng),這個(gè)插件使得在大型代碼庫(kù)中找到和管理組件更加容易和直觀,這篇文章主要介紹了Vue自動(dòng)生成組件示例總結(jié),需要的朋友可以參考下
2023-12-12
Vue頁(yè)面骨架屏注入方法
這篇文章主要介紹了Vue頁(yè)面骨架屏注入的操作，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-05-05
基于Vue3+element-plus實(shí)現(xiàn)中英文切換功能
在?Vue?3?項(xiàng)目中結(jié)合?vue-i18n?和?Element?Plus?實(shí)現(xiàn)中英文切換是一個(gè)常見(jiàn)的需求,下面是一個(gè)詳細(xì)的步驟指南,幫助你完成這個(gè)任務(wù),需要的朋友可以參考下
2024-11-11
使用el-table做成樹(shù)形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動(dòng)視圖問(wèn)題
這篇文章主要介紹了使用el-table做成樹(shù)形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動(dòng)視圖問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07