脚本宝典收集整理的这篇文章主要介绍了uniapp微信小程序:key失效的解决方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
uniapp 代码
<template>
<view>
<image v-for="(ITem, i) in fileList" :key="item[urlKey]" :src="item[urlKey]"></image>
</view>
</template>
<script>
export default {
PRops: {
urlKey: {default: 'url'},
fileList: Array
}
}
</script>
编译到 微信小程序
<view>
<block wx:for="{{fileList}}" wx:for-item="item" wx:for-index="i" wx:key="urlKey">
<image src="{{item[urlKey]}}"></image>
</block>
</view>
貌似不支持 :key="item[urlKey]" 这种语法
解决方案：
<template>
<view>
<image v-for="(item, i) in fileList" :key="key(item)" :src="item[urlKey]"></image>
</view>
</template>
<script>
export default {
props: {
urlKey: {default: 'url'},
fileList: Array
},
computed: {
key() {
return e => e[this.urlKey]
}
}
}
</script>
使用computed就可以解决了
到此这篇关于uniapp微信小程序:key失效的解决方法的文章就介绍到这了,更多相关uniapp小程序key失效内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的uniapp微信小程序:key失效的解决方法全部内容，希望文章能够帮你解决uniapp微信小程序:key失效的解决方法所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。