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 相关文章推荐
IE JS编程需注意的内存释放问题
Jun 23 Javascript
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
JavaScript基本编码模式小结
May 23 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
Vue获取微博授权URL代码实例
Nov 04 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 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脚本的10个技巧(5)
2006/10/09 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
详解js类型判断
2018/05/22 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
规划编制实施方案
2014/03/15 职场文书
2014年冬季防火方案
2014/05/21 职场文书
本科毕业生自荐信
2014/05/26 职场文书
成本会计岗位职责
2015/02/03 职场文书
离婚答辩状范文
2015/05/22 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
css样式important规则的正确使用方式
2022/06/10 HTML / CSS