vue在data中定义变量后依旧报undefined的解决

 更新时间:2024年03月24日 16:19:48   作者:weixin_43939111  
这篇文章主要介绍了vue在data中定义变量后依旧报undefined的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

在data定义变量后依旧报undefined

之前跑的好好项目突然data中报undefined,在mounted打印也出不来。

最后排查,还是个人粗心问题:

变量太多,自己多加变量时忘了赋值,导致整个运行报错。

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

如上代码,虽然我在末尾加变量,es6语法会默认cc:c,在编译器里认通过。

但是,c没有初始值卡住之后会影响其他data变量的获取,打印ab的值都是undefined

vue data定义的变量使用另一变量

在写代码的时候,遇到一个问题,我想使用data里面的一个变量,赋值给data里面的另一个变量。

直接赋不行 latitude: latitude, 不行,latitude: this.latitude, 也不行,上网查了一下,可以通过computed和mounted来实现,成功了。

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)
  },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 简单聊聊vue3.0 sfc中setup的变化

    简单聊聊vue3.0 sfc中setup的变化

    这篇文章主要给大家介绍了关于vue3.0 sfc中setup变化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-10-10
  • vue-router传参的四种方式超详细讲解

    vue-router传参的四种方式超详细讲解

    这篇文章主要介绍了vue-router传参的四种方式超详细,有router-link路由导航方式传参,调用$router.push实现路由传参,通过路由属性name匹配路由,再根据params传递参数等等,结合示例代码讲解的非常详细,需要的朋友可以参考下
    2022-12-12
  • el-table表头根据内容自适应完美解决表头错位和固定列错位

    el-table表头根据内容自适应完美解决表头错位和固定列错位

    这篇文章主要介绍了el-table表头根据内容自适应完美解决表头错位和固定列错位,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • vue2.0如何实现echarts饼图(pie)效果展示

    vue2.0如何实现echarts饼图(pie)效果展示

    这篇文章主要介绍了vue2.0如何实现echarts饼图(pie)效果展示,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 前端部署踩坑实战记录(部署后404、页面空白)

    前端部署踩坑实战记录(部署后404、页面空白)

    Vue项目打包部署Nginx服务器后,刷新页面后出现404的问题,下面这篇文章主要给大家介绍了关于前端部署踩坑的实战记录,文中包括部署后404、页面空白等问题的解决办法,需要的朋友可以参考下
    2024-09-09
  • 解决Vue axios post请求,后台获取不到数据的问题方法

    解决Vue axios post请求,后台获取不到数据的问题方法

    今天小编就为大家分享一篇解决Vue axios post请求,后台获取不到数据的问题方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue组件封装上传图片和视频的示例代码

    Vue组件封装上传图片和视频的示例代码

    这篇文章主要介绍了Vue封装上传图片和视频的组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-07-07
  • Vue Element前端应用开发之Vuex中的API Store View的使用

    Vue Element前端应用开发之Vuex中的API Store View的使用

    这篇文章主要介绍了Vue Element前端应用开发之Vuex中的API Store View的使用,对Vue感兴趣的同学,可以参考下
    2021-05-05
  • Vue+TypeScript中处理computed方式

    Vue+TypeScript中处理computed方式

    这篇文章主要介绍了Vue+TypeScript中处理computed方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 基于 Vue 实现一个酷炫的 menu插件

    基于 Vue 实现一个酷炫的 menu插件

    本文给大家介绍基于 Vue 实现一个酷炫的 menu插件,此篇教程需要大家具备一定的css和vue基础知识,本文分步骤给大家介绍的非常详细,需要的朋友参考下吧
    2017-11-11

最新评论