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

总结

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

相关文章

  • ElementUI下拉框选择后不显示值问题及解决

    ElementUI下拉框选择后不显示值问题及解决

    这篇文章主要介绍了ElementUI下拉框选择后不显示值问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • Vue实现固定定位图标滑动隐藏效果

    Vue实现固定定位图标滑动隐藏效果

    移动端页面,有时候会出现一些固定定位在底部图标,比如购物车等。这篇文章主要介绍了Vue制作固定定位图标滑动隐藏效果,需要的朋友可以参考下
    2019-05-05
  • 关于element-ui日期时间选择器选不中12小时以后的时间详解

    关于element-ui日期时间选择器选不中12小时以后的时间详解

    在之前做个一个组件页面中,引用了element-ui组件的日期选择器,遇到的一个小问题,下面这篇文章主要给大家介绍了关于element-ui日期时间选择器选不中12小时以后时间的相关资料,需要的朋友可以参考下
    2022-08-08
  • vue3实现国际化的过程与遇到的问题详解

    vue3实现国际化的过程与遇到的问题详解

    像很多大型的网址,特别是跨国际等公司网页,访问来自世界各地用户,所以网页的国际化极其重要的需求,这篇文章主要给大家介绍了关于vue3实现国际化的过程与遇到的问题的相关资料,需要的朋友可以参考下
    2022-05-05
  • Vue打包后页面出现空白解决办法

    Vue打包后页面出现空白解决办法

    本文主要介绍了Vue打包后页面出现空白解决办法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Vue中v-cloak和v-pre指令使用详解

    Vue中v-cloak和v-pre指令使用详解

    在 Vue.js 中,v-cloak 和 v-pre 是两个比较特殊但非常有用的指令,它们主要用于处理模板编译和显示相关的问题,本文就来详细的介绍一下Vue中v-cloak和v-pre指令使用,感兴趣的可以了解一下
    2026-01-01
  • Vue自动生成组件示例总结

    Vue自动生成组件示例总结

    在Vue中,我们可以使用unplugin-generate-component-name插件自动基于目录名称生成组件名称,这个插件使得在大型代码库中找到和管理组件更加容易和直观,这篇文章主要介绍了Vue自动生成组件示例总结,需要的朋友可以参考下
    2023-12-12
  • Vue页面骨架屏注入方法

    Vue页面骨架屏注入方法

    这篇文章主要介绍了Vue页面骨架屏注入的操作,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • 基于Vue3+element-plus实现中英文切换功能

    基于Vue3+element-plus实现中英文切换功能

    在 Vue 3 项目中结合 vue-i18n 和 Element Plus 实现中英文切换是一个常见的需求,下面是一个详细的步骤指南,帮助你完成这个任务,需要的朋友可以参考下
    2024-11-11
  • 使用el-table做成树形结构并解决数据驱动视图问题

    使用el-table做成树形结构并解决数据驱动视图问题

    这篇文章主要介绍了使用el-table做成树形结构并解决数据驱动视图问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07

最新评论