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

MySQL 5.7.21 installation and configuration method graphic tutorial (window)

Install mysql5.7.21 in the window environment. Th...

Detailed steps to install the specified version of docker (1.12.6) using rpm

1. Reasons If the system is Centos7.3, the Docker...

idea combines docker to realize image packaging and one-click deployment

1. Install Docker on the server yum install docke...

Instructions for nested use of MySQL ifnull

Nested use of MySQL ifnull I searched online to s...

Vue implements three-dimensional column chart based on echarts

The three-dimensional column chart consists of th...

Analysis of pitfalls in rounding operation of ROUND function in MySQL

This article uses examples to illustrate the pitf...

HTML+CSS to create heartbeat special effects

Today we are going to create a simple heartbeat e...

Tomcat's class loading mechanism process and source code analysis

Table of contents Preface 1. Tomcat class loader ...

mysql5.7.19 winx64 decompressed version installation and configuration tutorial

Recorded the installation tutorial of mysql 5.7.1...

MySQL 8.0.18 installation and configuration graphic tutorial

Learning objectives: Learn to use Windows system ...

Detailed explanation of three commonly used web effects in JavaScript

Table of contents 1 element offset series 1.1 Off...

Detailed explanation of the difference between var, let and const in JavaScript

Table of contents As a global variable Variable H...