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失效内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• uniapp在微信小程序中使用ECharts的方法
• uniapp微信小程序实现一个页面多个倒计时
• uniapp,微信小程序中使用 MQTT的问题
• 微信小程序uniapp实现左滑删除效果(完整代码)

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！