脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → uniapp小程序key失效

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

 更新时间：2021年01月20日 14:35:18   作者：灬都是个谜  
这篇文章主要介绍了uniapp微信小程序:key失效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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 检测键盘按键信息及键码值对应介绍

    Javascript中有3个事件句柄在对应键盘的输入状态:按键被按下（按下按键但还没有抬起）、点击按键（按下并抬起按键）、按键抬起（按键抬起之后）,接下来详细介绍，感兴趣的朋友可以了解下
    2013-01-01
  • BootStrap表单时间选择器详解

    BootStrap表单时间选择器详解

    这篇文章主要为大家详细介绍了BootStrap表单时间选择器的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JavaScript数组常用方法实例讲解总结

    JavaScript数组常用方法实例讲解总结

    这篇文章主要介绍了JavaScript数组及常见方法,结合实例形式总结分析了JavaScript数组的基本获取、添加、删除、排序、翻转等相关操作技巧,需要的朋友可以参考下
    2021-09-09
  • 点击button获取text内容并改变样式的js实现

    点击button获取text内容并改变样式的js实现

    这篇文章主要介绍了点击button获取text内容并改变样式的js实现,经测试非常实用，需要的朋友可以参考下
    2014-09-09
  • 一文带你深入理解JavaScript中的时间处理

    一文带你深入理解JavaScript中的时间处理

    在JavaScript中,处理时间和日期是常见任务之一,涉及到从用户界面的日期选择器到服务器上的时间戳,再到时间间隔的计算,本文将深入探讨JavaScript中的时间处理,需要的朋友可以参考下
    2023-09-09
  • uniapp实现人脸识别功能详细示例

    uniapp实现人脸识别功能详细示例

    这次使用uni-app框架开发一个小程序,有一个刷脸功能,所以下面这篇文章主要给大家介绍了关于uniapp实现人脸识别功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • 一步步教你用js简单实现新年倒计时

    一步步教你用js简单实现新年倒计时

    一转眼已经腊月了,相信小伙伴们一定想知道我们距离2023新年还有多少天,下面这篇文章主要给大家介绍了关于如何一步步教你用js简单实现新年倒计时的相关资料,需要的朋友可以参考下
    2022-12-12
  • 详解使用grunt完成requirejs的合并压缩和js文件的版本控制

    详解使用grunt完成requirejs的合并压缩和js文件的版本控制

    这篇文章主要介绍了详解使用grunt完成requirejs的合并压缩和js文件的版本控制 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • JS中数组合并的几种常见方法

    JS中数组合并的几种常见方法

    这篇文章主要给大家介绍了关于JS中数组合并的几种常见方法,在开发的过程中,我们很多时候会遇到需要将两个数组合并成一个数组的情况,文中通过实例代码介绍的非常详细,出现需要的朋友可以参考下
    2023-07-07
  • location.hash保存页面状态的技巧

    location.hash保存页面状态的技巧

    hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。接下来通过本文给大家介绍location.hash保存页面状态的相关内容，感兴趣的朋友一起学习吧
    2016-04-04

最新评论