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打印也出不來。

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

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

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

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

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

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

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

直接賦不行 latitude: latitude, 不行，latitude: this.latitude, 也不行，上網(wǎng)查了一下，可以通過computed和mounted來實(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)文章

簡(jiǎn)單聊聊vue3.0 sfc中setup的變化
這篇文章主要給大家介紹了關(guān)于vue3.0 sfc中setup變化的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2021-10-10
vue-router傳參的四種方式超詳細(xì)講解
這篇文章主要介紹了vue-router傳參的四種方式超詳細(xì),有router-link路由導(dǎo)航方式傳參，調(diào)用$router.push實(shí)現(xiàn)路由傳參，通過路由屬性name匹配路由，再根據(jù)params傳遞參數(shù)等等，結(jié)合示例代碼講解的非常詳細(xì)，需要的朋友可以參考下
2022-12-12
el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯(cuò)位和固定列錯(cuò)位
這篇文章主要介紹了el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯(cuò)位和固定列錯(cuò)位,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
vue2.0如何實(shí)現(xiàn)echarts餅圖(pie)效果展示
這篇文章主要介紹了vue2.0如何實(shí)現(xiàn)echarts餅圖(pie)效果展示,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
前端部署踩坑實(shí)戰(zhàn)記錄(部署后404、頁面空白)
Vue項(xiàng)目打包部署Nginx服務(wù)器后,刷新頁面后出現(xiàn)404的問題,下面這篇文章主要給大家介紹了關(guān)于前端部署踩坑的實(shí)戰(zhàn)記錄,文中包括部署后404、頁面空白等問題的解決辦法,需要的朋友可以參考下
2024-09-09
解決Vue axios post請(qǐng)求,后臺(tái)獲取不到數(shù)據(jù)的問題方法
今天小編就為大家分享一篇解決Vue axios post請(qǐng)求,后臺(tái)獲取不到數(shù)據(jù)的問題方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Vue組件封裝上傳圖片和視頻的示例代碼
這篇文章主要介紹了Vue封裝上傳圖片和視頻的組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-07-07
Vue Element前端應(yīng)用開發(fā)之Vuex中的API Store View的使用
這篇文章主要介紹了Vue Element前端應(yīng)用開發(fā)之Vuex中的API Store View的使用，對(duì)Vue感興趣的同學(xué)，可以參考下
2021-05-05
Vue+TypeScript中處理computed方式
這篇文章主要介紹了Vue+TypeScript中處理computed方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
基于 Vue 實(shí)現(xiàn)一個(gè)酷炫的 menu插件
本文給大家介紹基于 Vue 實(shí)現(xiàn)一個(gè)酷炫的 menu插件，此篇教程需要大家具備一定的css和vue基礎(chǔ)知識(shí)，本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2017-11-11