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失效内容请搜索站长技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长技术!
现在,人们喜欢在浏览网页时做一些其他事情而不离开该网页,这通常是通过ajax来实...
JScript下有一个Enumerator对象可以遍历集合。根据它的 文档 写了以下程序,可以...
说明 本文更新于2019-02-18,使用VSCode 1.14.1,操作系统为Windows。 配置文件 ...
借鉴自某位大佬不记得了 using System.Collections;using System.Collections.Ge...
一、简介 小波变换原理 小波变换是一种信号的时间一尺度(时间一频率)分析方法一...
LinuxTCP协议——三次握手【图片文字】 TCP协议 面向连接 三次握手 双方状态的转...
gImageReader是Tesseract开源OCR引擎的前端。Tesseract最初是由HP开发的,然后于...
git rebase -i 修改历史提交 commit 3 add 22222 commit 2 add 11111 commit 1 c...
一,网页基础结构: XML/HTML Code 复制内容到剪贴板 html head title 我的第一...
引言 ? 编号 确定项目 描述 1 确定范围 确定被测项目中功能模块子功能模块等需要...