uni-app 【报Bug】<text class="user__content-title uni-ellipsis">{{ (data.creatorID[0]||{}).nickname }}</text>

uni-app 【报Bug】<text class="user__content-title uni-ellipsis">{{ (data.creatorID[0]||{}).nickname }}</text>

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

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

HBuilderX类型：正式

HBuilderX版本号：3.2.9

手机系统：Android

手机系统版本号：Android 10

手机厂商：华为

手机机型：s

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

示例代码：
<image class="user__header-image" :src="(data.creatorID[0].avatar_file||{}).url" mode="aspectFill"/> <text class="user__content-title uni-ellipsis">{{ (data.creatorID[0]||{}).nickname }}</text> ```

操作步骤：

  • 使用|| ()等简写

预期结果：

  • 正常

实际结果：

  • 报错，崩溃

bug描述：

<text class="user__content-title uni-ellipsis">{{ (data.creatorID[0]||{}).nickname }}</text>  
```
这种写法编译到安卓端正常，小程序端报错，无法运行，写法应该是正确的，编译后就不行了

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211010/b791b85d2e8545e2c4b27c255d6d4d76.png)

更多关于uni-app 【报Bug】<text class="user__content-title uni-ellipsis">{{ (data.creatorID[0]||{}).nickname }}</text>的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 【报Bug】<text class="user__content-title uni-ellipsis">{{ (data.creatorID[0]||{}).nickname }}</text>的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的模板表达式解析问题。在uni-app中，模板表达式的处理在不同平台存在差异。

问题分析： {{ (data.creatorID[0]||{}).nickname }} 这种写法在Vue的Web环境下可以正常解析，但在小程序平台（特别是微信小程序）的模板编译阶段会报错。因为小程序端的模板语法不支持这种复杂的JavaScript表达式。

解决方案：

  1. 推荐方案：使用计算属性
computed: {
  nickname() {
    const creator = this.data.creatorID && this.data.creatorID[0]
    return creator ? creator.nickname : ''
  }
}

模板中简化为：

<text class="user__content-title uni-ellipsis">{{ nickname }}</text>
  1. 使用三元表达式（小程序兼容）
<text class="user__content-title uni-ellipsis">
  {{ data.creatorID && data.creatorID[0] ? data.creatorID[0].nickname : '' }}
</text>
  1. 使用v-if条件渲染
<text 
  v-if="data.creatorID && data.creatorID[0]"
  class="user__content-title uni-ellipsis"
>
  {{ data.creatorID[0].nickname }}
</text>
回到顶部