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 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
一个简单的js树形菜单
Dec 09 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
vue cli 全面解析
Feb 28 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
echarts多条折线图动态分层的实现方法
May 24 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
如何手写一个简易的 Vuex
Oct 10 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设计模式之观察者模式的应用详解
2013/05/21 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
php二维码生成以及下载实现
2017/09/28 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
使用js实现数据格式化
2014/12/03 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
pycharm显示远程图片的实现
2019/11/04 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
手机业务员岗位职责
2013/12/13 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
初一地理教学反思
2014/01/16 职场文书
开学典礼演讲稿
2014/05/23 职场文书
培训通知书模板
2015/04/17 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS