uniapp微信小程序:key失效的解决方法
程序员文章站
2022-06-18 09:12:55
uniapp 代码
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失效内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
上一篇： 茼蒿要用水煮多久才能熟