Uniapp WeChat applet: Solution to key failure

Uniapp WeChat applet: Solution to key failure

uniapp code

<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>

Compile to WeChat applet

<view>
  <block wx:for="{{fileList}}" wx:for-item="item" wx:for-index="i" wx:key="urlKey">
    <image src="{{item[urlKey]}}"></image>
  </block>
</view>

It seems that the syntax of: key="item[urlKey]" is not supported

Solution:

<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>

This can be solved using computed

This is the end of this article about the uniapp WeChat applet: solution to the problem of key expiration. For more relevant content about the uniapp applet key expiration, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • How to use ECharts in WeChat Mini Programs using uniapp
  • Uniapp WeChat applet realizes multiple countdowns on one page
  • uniapp, Issues with using MQTT in WeChat applets
  • WeChat applet uniapp realizes the left swipe to delete effect (complete code)

<<:  foreman ubuntu16 quick installation

>>:  Solution to MySQL remote connection failure

Recommend

A brief discussion on when MySQL uses internal temporary tables

union execution For ease of analysis, use the fol...

HTML table tag tutorial (32): cell horizontal alignment attribute ALIGN

In the horizontal direction, you can set the cell...

Design Story: The Security Guard Who Can't Remember License Plates

<br />In order to manage the vehicles enteri...

Installing Windows Server 2008 operating system on a virtual machine

This article introduces the installation of Windo...

MySQL data analysis storage engine example explanation

Table of contents 1. Introduce cases 2. View the ...

Semanticization of HTML tags (including H5)

introduce HTML provides the contextual structure ...

Get a list of your top 10 most frequently used terminal commands in Linux

I think the commands I use most often are: Choice...

React Hook usage examples (6 common hooks)

1. useState: Let functional components have state...

How to perform query caching in MySQL and how to solve failures

We all know that we need to understand the proper...

Tutorial on installing mysql5.7.18 on windows10

This tutorial shares the installation and configu...

21 MySQL standardization and optimization best practices!

Preface Every good habit is a treasure. This arti...

A brief discussion on MySQL select optimization solution

Table of contents Examples from real life Slow qu...

MySQL 5.5 installation and configuration graphic tutorial

Organize the MySQL 5.5 installation and configura...