uniapp :class不支持 getAvatarClass(currentContact.type) 语法导致的问题

原创于 2025-10-16 14:59:45 发布 · 236 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

uniapp :class不支持 getAvatarClass(currentContact.type) 语法

导致的如下问题：

4:38:01.915 Module Error (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js): 14:38:01.915 (Emitted value instead of an instance of Error) 14:38:01.915 Errors compiling template: 14:38:01.915 tag <scroll-view> has no matching end tag. 14:38:01.915 68 | 14:38:01.916 69 | 14:38:01.916 70 | <scroll-view class="list-scroll" scroll-y> 14:38:01.916 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 14:38:01.916 71 | <view class="list-content"> 14:38:01.916 72 | <view class="contact-item" v-for="(item, index) in displayList" :key="item.markerId" 14:38:01.916 Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 14:38:01.916 118|  14:38:01.916 119|

问题修复：查找到所有 :class 调用函数的问题，做好匹配。我原先写成
:class=["getAvatarClass(item.type)"] 才导致上面的错误，代码太长，找了好久的原因。

才发现是如下问题：
<view class="item-avatar" :class="[getAvatarClass(item.type)]">
<text class="avatar-text">{{getTypeText(item.type)}}</text>
</view>