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 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
JavaScript中出现乱码的处理心得
Dec 24 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
详解Puppeteer 入门教程
May 09 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
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警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
javascript OFFICE控件测试代码
2009/12/08 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
javascript 闭包
2011/09/15 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
深入理解js中this的用法
2016/05/28 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
Python 内置函数complex详解
2016/10/23 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
解决DataFrame排序sort的问题
2018/06/07 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
材料化学应届生求职信
2013/10/09 职场文书
优秀医生事迹材料
2014/02/12 职场文书
项目申请汇报材料
2014/08/16 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
如何用python清洗文件中的数据
2021/06/18 Python