uniapp微信小程序:key失效的解决方法


Posted in Javascript onJanuary 20, 2021

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失效内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
详解Node.js开发中的express-session
May 19 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
JavaScript实现下拉列表
Jan 20 #Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 #Vue.js
详解实现vue的数据响应式原理
Jan 20 #Vue.js
vue实现简易计算器功能
Jan 20 #Vue.js
vue使用过滤器格式化日期
Jan 20 #Vue.js
Vue实现简单计算器
Jan 20 #Vue.js
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 #Javascript
You might like
咖啡语言
2021/03/03 咖啡文化
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
ExtJS 入门
2010/10/29 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
vue组件的写法汇总
2018/04/12 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
python中kmeans聚类实现代码
2018/02/23 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
python使用建议与技巧分享(二)
2020/08/17 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
普通大学毕业生自荐信
2013/11/04 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
支行行长岗位职责
2015/02/15 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
Python基础之常用库常用方法整理
2021/04/30 Python
python实现学员管理系统(面向对象版)
2022/06/05 Python