uniapp微信小程序:key失效的解决方法
更新时间：2021年01月20日 14:35:18 作者：灬都是个谜
这篇文章主要介绍了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失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了fabric.js实现diy明信片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
javascript根据时间生成m位随机数，最大13位随机数，并且不能保证首位不为0，实现代码如下，需要的朋友可以参考下2014-10-10
这篇文章主要帮助大家理解学习javascript封装，通过封装可以强制实施信息隐藏，本文为大家分析了封装的利弊，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要为大家详细介绍了javascrpt密码强度校验函数，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
JavaScript 匿名函数（anonymous function）与闭包（closure）
JavaScript 匿名函数（anonymous function）与闭包（closure） ,学习js的朋友可以参考下。2011-10-10
客户端限制只能上传jpg格式图片的js代码,对用户体验较好，适合网页中只能使用jpg格式图片的情况。2010-12-12
这篇文章主要为大家详细介绍了HTML5+Canvas，和jquery技术，调用手机拍照功能实现图片上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
获取url上的某个参数的方法有很多，在本文为大家介绍下使用javascript是如何实现的，感兴趣的朋友不要错过2013-11-11
JavaScript中的appendChild()方法示例详解
这篇文章主要介绍了JavaScript中的appendChild()方法,appendChild()方法是向节点添加最后一个子节点,也可以使用此方法从一个元素向另一个元素移动元素,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-10-10
前端开发中,有时项目会遇到一些快捷键需求,比如绑定快捷键,展示快捷键,编辑快捷键等需求,所以本文就来用JavaScript手写一个简单的快捷键库吧2024-02-02
最新评论