uni-app 微信小程序class动态绑定问题

uni-app 微信小程序class动态绑定问题

开发环境 版本号 项目创建方式
Windows win11 CLI
第三方开发者工具 1.06.2307260 -
基础库 2.33.0 -
CLI vite+vue3 - 
## 示例代码：

```sh
<template>  
  <view class="pd-80">  
    <view v-for="item in list" :key="item.id" :class="item.status ? 'color-primary' : 'color-danger'">{{ item.status ? '已签到' : '未签到' }}</view>  
    <button @click="changeStatus">切换状态</button>  
  </view>  
</template>  

<script setup lang="ts">  
const list = ref([  
  {  
    id: 1,  
    status: 0  
  },  
  {  
    id: 2,  
    status: 1  
  }  
])  

const changeStatus = () => {  
  list.value = [  
    {  
      id: 2,  
      status: 1  
    },  
    {  
      id: 1,  
      status: 1  
    }  
  ]  
}  
</script>  

<style scoped lang="scss">  
.color-primary {  
  color: #32c896;  
}  

.color-danger {  
  color: #eb5757;  
}  
</style>

操作步骤：

  • 点击 button 改变数组顺序

预期结果：

实际结果：

bug描述：

使用v-for循环，当数组顺序改变后，动态绑定的class的值不会根据条件判断重新渲染。

dependencies:

{
  "[@dcloudio](/user/dcloudio)/uni-app": "3.0.0-alpha-3061620221230002",
  "[@dcloudio](/user/dcloudio)/uni-app-plus": "3.0.0-alpha-3061620221230002",
  "[@dcloudio](/user/dcloudio)/uni-components": "3.0.0-alpha-3061620221230002",
  "[@dcloudio](/user/dcloudio)/uni-h5": "3.0.0-alpha-3061620221230002",
  "[@dcloudio](/user/dcloudio)/uni-mp-alipay": "3.0.0-alpha-3061620221230002",
  "[@dcloudio](/user/dcloudio)/uni-mp-baidu": "3.0.0-alpha-3061620221230002",
  "[@dcloudio](/user/dcloudio)/uni-mp-kuaishou": "3.0.0-alpha-3061620221230002",
  "[@dcloudio](/user/dcloudio)/uni-mp-lark": "3.0.0-alpha-3061620221230002",
  "[@dcloudio](/user/dcloudio)/uni-mp-qq": "3.0.0-alpha-3061620221230002",
  "[@dcloudio](/user/dcloudio)/uni-mp-toutiao": "3.0.0-alpha-3061620221230002",
  "[@dcloudio](/user/dcloudio)/uni-mp-weixin": "3.0.0-alpha-3061620221230002",
  "[@dcloudio](/user/dcloudio)/uni-quickapp-webview": "3.0.0-alpha-3061620221230002",
  "[@hyoga](/user/hyoga)/uni-socket.io": "^1.0.0",
  "[@tencentcloud](/user/tencentcloud)/call-uikit-wechat": "^1.4.2",
  "js-md5": "^0.7.3",
  "pinia": "^2.0.33",
  "vue": "^3.2.45",
  "vue-i18n": "^9.1.9"
}

devDependencies:

{
  "[@dcloudio](/user/dcloudio)/types": "^3.2.7",
  "[@dcloudio](/user/dcloudio)/uni-automator": "3.0.0-alpha-3061620221230002",
  "[@dcloudio](/user/dcloudio)/uni-cli-shared": "3.0.0-alpha-3061620221230002",
  "[@dcloudio](/user/dcloudio)/uni-stacktracey": "3.0.0-alpha-3061620221230002",
  "[@dcloudio](/user/dcloudio)/vite-plugin-uni": "3.0.0-alpha-3061620221230002",
  "[@types](/user/types)/node": "^18.14.6",
  "[@vue](/user/vue)/tsconfig": "^0.1.3",
  "cross-env": "^7.0.3",
  "miniprogram-ci": "^1.9.5",
  "sass": "^1.58.3",
  "sass-loader": "^13.2.0",
  "semver": "^7.5.1",
  "prettier": "^2.8.4",
  "typescript": "^4.9.4",
  "unplugin-auto-import": "^0.15.1",
  "vite": "4.0.4",
  "vue-tsc": "^1.0.24"
}

更多关于uni-app 微信小程序class动态绑定问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

把 key=item.id 换成 :key=“index” <view v-for="(item,index) in list" :key="index" :class="item.status == 1 ? 'color-primary' : 'color-danger'">{{ item.status ? ‘已签到’ : ‘未签到’ }}</view>

更多关于uni-app 微信小程序class动态绑定问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


或者直接 :key=“item”

这么改确实可以解决。但是在vue3上是不存在这个问题的，应该是uniapp的BUG

回复 5***@qq.com: 有可能 一般来说 绑定id是不会出现这种问题的

回复 爱豆豆: 先把问题解决了吧 哈哈哈

这是一个微信小程序中v-for渲染时的key复用问题。在uni-app中，当数组顺序改变时，微信小程序会复用之前的组件实例，导致class没有重新计算。

解决方案有以下几种：

  1. 使用更稳定的key值，比如给每个item添加唯一id：
<view v-for="item in list" :key="'item-'+item.id" :class="item.status ? 'color-primary' : 'color-danger'">
  1. 强制重新渲染组件，可以给v-for外层添加一个key：
<view v-for="item in list" :key="item.id" :class="item.status ? 'color-primary' : 'color-danger'" :data-key="Math.random()">
  1. 使用计算属性返回新的数组对象，而不是直接修改原数组：
const changeStatus = () => {
  list.value = [...[
    { id: 2, status: 1 },
    { id: 1, status: 1 }
  ]]
}
回到顶部