• 售前

  • 售后

热门帖子
入门百科

uniapp微信小步伐:key失效的解决方法

[复制链接]
喝多的板砖剂 显示全部楼层 发表于 2021-10-25 19:46:39 |阅读模式 打印 上一主题 下一主题
uniapp 代码
  1. <template>
  2.   <view>
  3.     <image v-for="(item, i) in fileList" :key="item[urlKey]" :src="item[urlKey]"></image>
  4.   </view>
  5. </template>
  6. <script>
  7.   export default {
  8.     props: {
  9.       urlKey: {default: 'url'},
  10.       fileList: Array
  11.     }
  12.   }
  13. </script>
复制代码
编译到 微信小程序
  1. <view>
  2.   <block wx:for="{{fileList}}" wx:for-item="item" wx:for-index="i" wx:key="urlKey">
  3.     <image src="{{item[urlKey]}}"></image>
  4.   </block>
  5. </view>
复制代码
貌似不支持 :key="item[urlKey]" 这种语法
解决方案:
  1. <template>
  2.   <view>
  3.     <image v-for="(item, i) in fileList" :key="key(item)" :src="item[urlKey]"></image>
  4.   </view>
  5. </template>
  6. <script>
  7.   export default {
  8.     props: {
  9.       urlKey: {default: 'url'},
  10.       fileList: Array
  11.     },
  12.     computed: {
  13.       key() {
  14.         return e => e[this.urlKey]
  15.       }
  16.     }
  17.   }
  18. </script>
复制代码
使用computed就可以解决了
到此这篇关于uniapp微信小程序:key失效的解决方法的文章就先容到这了,更多相关uniapp小程序key失效内容请搜刮脚本之家以前的文章或继承欣赏下面的相关文章希望各人以后多多支持脚本之家!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作