页面上显示undefined在函数里打印console.log()却显示有值

其中1个原因是插值语法写了{{this}}

解决方法：this可以省略，把页面模板上的this去掉

修改前

<view>{{this.id}}<view>

修改后

<view>{{id}}</view>

还有1个原因是没有定义默认属性
例如没有定义navList数组里面对象count属性，但是在页面使用了，就会一直显示undefined，接着这个问题一种常见方法是，在给属性赋值之前先为对象初始化该属性，可以将其设置为一个默认值或者null。例如：

修改前

<view v-for(item,index) in navList :key="index">{{item.text}} （{{item.count}}）</view>

navList: [{text: '已激活',state:0},{text: '未激活',state:1}];

this.navList[0].count = 10;
this.navList[1].count = 42;

修改后

//上面代码不变

//通过将count属性设置为一个默认值，你就避免了在赋值之前访问未定义的属性导致的undefined错误。
navList: [{text: '已激活',state:0,count: 0},{text: '未激活',state:1,count: 0}];

//下面代码不变

除了在赋值之前初始化属性为默认值或null，还有其他方法可以避免访问未定义属性时返回undefined错误。以下是一些可能的解决方案：

使用逻辑与操作符：

this.navList[0].count = this.navList[0].count || 10;

这种方式利用了逻辑与(&&)的短路特性。如果this.navList[0].count已经定义，则表达式会直接返回它的值；否则，它会将activateCount的值赋给this.navList[0].count。

使用Object.assign()：

this.navList[0] = Object.assign({}, this.navList[0], { count: 10 });

Object.assign()方法可以将一个或多个源对象的属性复制到目标对象中。通过传入一个空对象作为目标对象，并在源对象中添加新的属性count，你可以更新this.navList[0]对象。

这些都是一些常见的方法来处理属性不存在的情况，根据具体的需求和代码结构，你可以选择合适的方式来解决问题。