酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
阿里云爆款特惠,精选爆款产品低至0.55折
酷站

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

来源:转载 作者:秩名 人气: 发布时间:2021-01-21
本篇文章主要介绍了uniapp微信小程序:key失效的解决方法介绍,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

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就可以解决了

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://segmentfault.com/a/1190000039035350

相关文章

  • 详解vue仿携程轮播图效果(滑动轮播,下方高度自适应)

    详解vue仿携程轮播图效果(滑动轮播,下方高度自适应)

    先看案例,使用vue+swiper实现,slide不同高度时,动态计算盒子高度,让其下方高度自适应的效果 首先搭建vue项目,这里不做过多说明,然后安装swiper npm install swiper --save-dev 1. js部分:初始化swiper组件,vue要在mounted生命周......
    02-12
  • uniapp微信小程序:key失效的解决方法介绍

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

    uniapp 代码 template view image v-for=(item, i) in fileList :key=item[urlKey] :src=item[urlKey]/image /view/templatescript export default { props: { urlKey: {default: url}, fileList: Array } }/script 编译到 微信小程序 vi......
    01-21
  • 原生js实现自定义滚动条的实例教程

    原生js实现自定义滚动条的实例教程

    1.HTML文件 div1是滚动条,div2是滚动小球,div3是文本区域容器,div4是文本区域。 div id=div div id=div1 div id=div2 /div /div div id=div3 div id=div4 pCSS3 教程/p pCSS3 教程/p pCSS3 简介/p pCSS3 边框/p pCSS3 圆角/p pCSS3 背......
    01-21
  • Vue开发人员的7个最好的VSCode扩展的介绍

    Vue开发人员的7个最好的VSCode扩展的介绍

    在Visual Studio中添加正确的VS Code扩展可以让你作为开发者的生活变得更加轻松。 它们可以帮助格式化、可伸缩性、强制执行最佳实践,从而自动化开发过程中许多容易忘记的任务。它们也可以只是有趣的扩展,使我们的代码看起来更漂亮/更容......
    01-20
  • vue element el-transfer增加拖拽功能的实现

    vue element el-transfer增加拖拽功能的实现

    芯资管项目要求el-transfer增加拖拽排序,左右上下互相拖拽功能;原来的组件不支持拖拽,这里要用个第三方脱宅组件sortablejs 首先安装 1 sudo npm i sortablejs --save-dev html代码 1 2 3 4 5 template el-transfer ref = transfer id ......
    01-15
  • 微信小程序实现多图上传的方法

    微信小程序实现多图上传的方法

    看一下效果图 index.html view class=imgs block wx:for={{ imgs }} wx:key={{ index }} view class=img-box image src={{ item }} / icon class=iconfont size=18px color=gray data-index={{ index }} bind:tap=close type=cancel/icon......
    06-20
  • Javascript执行流程细节的介绍

    Javascript执行流程细节的介绍

    Javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈、全局对象、执行环境、变量对象、活动对象、作用域和作用域链等,这些概念正是JS引擎工作的核心组件......
    05-15
  • javascript代码是如何被压缩

    javascript代码是如何被压缩

    随着前端的发展,特别是 React , Vue 等构造单页应用的兴起,前端的能力得以很大提升,随之而来的是项目的复杂度越来越大。 此时的前端的静态资源也越来越庞大,而毫无疑问 javascript 资源已是前端的主体资源,对于压缩它的体积至为重......
    05-06
  • 解决React在安装antd之后出现的Can't resolve './locale'问题

    解决React在安装antd之后出现的Can't resolve './locale'问题

    React在安装antd之后出现的Cant resolve ./locale问题,是因为moment在2.2之后的版本都有问题,而react默认使用了最新的moment,但是在moment@2.18.1中是没有问题的。 解决方案就是配置webpack的alias,将所有的 moment 路径引用导入到 mo......
    05-03
  • jQuery实现移动端图片上传预览组件的方法

    jQuery实现移动端图片上传预览组件的方法

    我们先来捋一捋想要实现的功能: 预览 删除 压缩 上传到服务器 基本机构 这样,我们的组件结构就有了: ;!function(window, $, undefined){ function Upload() { }; Upload.prototype.change = function() { }; Upload.prototype.del = f......
    05-01

最新更新