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失效内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库！
-
本文向大家介绍微信小程序new Date()方法失效问题解决方法，包括了微信小程序new Date()方法失效问题解决方法的使用技巧和注意事项，需要的朋友参考一下 iOS系统对js中的new Date()方法有格式要求 正确写法应该是 而实际应该过程中日期格式大部分都是2019-07-24这种，所以在实际应用过程中需要用正则对字符串进行预处理 在小程序开发过程中用到一个日期转换方法，然而苹果手机就
-
本文向大家介绍微信小程序 slot踩坑的解决，包括了微信小程序 slot踩坑的解决的使用技巧和注意事项，需要的朋友参考一下 今天在使用微信小程序 component 里的 slot 时发现，当只用一个 slot 并且将 slot 命名后，页面中调用这个 slot 并不会加载进来。 研究尝试后发现，如果想要使用命名的方式调用单个 slot ，也需要像调用多个 slot 的方式 在 component
-
本文向大家介绍微信小程序中hidden不生效原因的解决办法，包括了微信小程序中hidden不生效原因的解决办法的使用技巧和注意事项，需要的朋友参考一下 微信小程序中hidden不生效原因的解决办法 例如如下布局： 你会发现hidden没生效。经我实验发现hidden元素对块状布局才生效，所以这段代码里导致hidden没生效的罪魁祸首是display:flex。把这个去掉就可以了。 如果一定要用fl
-
本文向大家介绍微信小程序 加载 app-service.js 错误解决方法，包括了微信小程序 加载 app-service.js 错误解决方法的使用技巧和注意事项，需要的朋友参考一下 微信小程序开发过程中出现错误，经过一番思考解决此问题，这里给大家提醒下！ 加载 app-service.js 错误 WAService.js:2 不要在 undefined.js 注册多个Page APP-SERVI
-
本文向大家介绍微信小程序的动画效果详解，包括了微信小程序的动画效果详解的使用技巧和注意事项，需要的朋友参考一下 前言 由于公司计划有变，所以从H5页面改成去小程序写。所以在着手开发小程序。本人也不是什么前端高手，只是一名写后端偶尔写写前端的渣渣。请前端大神们勿喷。 一、什么是微信小程序？ 小程序在我的理解中只是高度封装的H5，封装了各种组件。根据官方的说法小程序运行不是在浏览器当中。姑且算是微
-
本文向大家介绍uniapp,微信小程序中使用 MQTT的问题，包括了uniapp,微信小程序中使用 MQTT的问题的使用技巧和注意事项，需要的朋友参考一下 最近在uniapp打包成微信小程序的项目中第一次用到了MQTT。使用比较简单，但是还是遇到了一些问题。在此记录一下。 官方文档：MQTT Github 官方MQTT测试工具：MQTTX。测试工具使用说明 MQTT的js文件：mqtt.min.j