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 相关文章推荐
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
vue组件vue-esign实现电子签名
Apr 21 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
PHP VS ASP
2006/10/09 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
Python查找相似单词的方法
2015/03/05 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
会计岗位职责
2013/11/08 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
审计专业自荐信范文
2014/04/21 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
写给女朋友的保证书
2015/05/09 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers