uni-app 空字符串赋值为数字0和布尔false时结果还是空字符串

uni-app 空字符串赋值为数字0和布尔false时结果还是空字符串

项目信息 详细信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.1.8
第三方开发者工具版本号 1.05.2102010
基础库版本号 2.16.0
项目创建方式 HBuilderX

产品分类：uniapp/小程序/微信

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.1.8

第三方开发者工具版本号：1.05.2102010

基础库版本号：2.16.0

项目创建方式：HBuilderX

示例代码：

<template>
<view>
<!-- 编辑页 -->
{{orderType}}
{{orderType2}}
{{orderType3}}
<!-- {{$store.state.orderType}} -->
</view>
</template> 

<script>
export default {
data() {
return {
orderType: '',
orderType2: '',
orderType3: ''
}
},
methods: {}
},  
onLoad() {  
console.log(this.$store.state.orderType)  
// this.orderType = this.$store.state.orderType;  
this.orderType2 = 0;  
this.orderType3 = false;  

},  
}
</script> 
<style> 
</style>

操作步骤：

<template>
<view>
<!-- 编辑页 -->
{{orderType}}
{{orderType2}}
{{orderType3}}
<!-- {{$store.state.orderType}} -->
</view>
</template> 

<script>
export default {
data() {
return {
orderType: '',
orderType2: '',
orderType3: ''
}
},
methods: {}
},  
onLoad() {  
console.log(this.$store.state.orderType)  
// this.orderType = this.$store.state.orderType;  
this.orderType2 = 0;  
this.orderType3 = false;  

},  
}
</script> 
<style> 
</style>

预期结果：

orderType2为0，orderType3为false

实际结果：

orderType2为‘’，orderType3为‘’

更多关于uni-app 空字符串赋值为数字0和布尔false时结果还是空字符串的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 空字符串赋值为数字0和布尔false时结果还是空字符串的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的uni-app数据响应式更新问题。在uni-app中，直接对data中已声明的响应式变量重新赋值时，如果模板中已经渲染了初始值，可能会出现更新不及时的情况。

在你的代码中，orderType2和orderType3在data中初始化为空字符串，在onLoad中重新赋值为0和false，但模板显示仍为空字符串。

解决方案：

  1. 使用this.$set()强制更新：
onLoad() {
  this.$set(this, 'orderType2', 0);
  this.$set(this, 'orderType3', false);
}
  1. 在mounted生命周期中赋值：
mounted() {
  this.orderType2 = 0;
  this.orderType3 = false;
}
  1. 使用Vue.nextTick()：
onLoad() {
  this.$nextTick(() => {
    this.orderType2 = 0;
    this.orderType3 = false;
  });
}
  1. 初始化时直接设置正确类型：
data() {
  return {
    orderType: '',
    orderType2: 0,  // 直接初始化为数字
    orderType3: false  // 直接初始化为布尔值
  }
}
回到顶部