Uniapp WeChatアプレット: キー障害の解決策

Uniapp WeChatアプレット: キー障害の解決策

ユニアプリコード

<テンプレート>
  <表示>
    <image v-for="(item, i) in fileList" :key="item[urlKey]" :src="item[urlKey]"></image>
  </ビュー>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    小道具: {
      urlKey: {デフォルト: 'url'},
      ファイルリスト: 配列
    }
  }
</スクリプト>

WeChatアプレットにコンパイルする

<表示>
  <block wx:for="{{fileList}}" wx:for-item="item" wx:for-index="i" wx:key="urlKey">
    <画像 src="{{item[urlKey]}}"></画像>
  </ブロック>
</ビュー>

key="item[urlKey]" という構文はサポートされていないようです

解決:

<テンプレート>
  <表示>
    <image v-for="(item, i) in fileList" :key="key(item)" :src="item[urlKey]"></image>
  </ビュー>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    小道具: {
      urlKey: {デフォルト: 'url'},
      ファイルリスト: 配列
    },
    計算: {
      鍵() {
        e => e[this.urlKey] を返します
      }
    }
  }
</スクリプト>

これは計算を使って解決できる

これで、uniapp WeChat アプレットに関するこの記事は終了です。キーの有効期限の問題の解決方法。uniapp アプレットのキーの有効期限に関する関連コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • uniappを使用してWeChatミニプログラムでEChartsを使用する方法
  • Uniapp WeChatアプレットは1ページに複数のカウントダウンを実現します
  • uniapp、WeChat アプレットで MQTT を使用する際の問題
  • WeChat アプレット uniapp は左スワイプによる削除効果を実現します (完全なコード)

<<:  LinuxでMySQLのリモートアクセス権を有効にし、ファイアウォールでポート3306を開きます。

>>:  フォアマン Ubuntu16 クイックインストール

推薦する

単純なCSSの詳細に惚れ込むと、重要ではないものの、効率性が向上する可能性がある

CSS の将来は非常に楽しみです。一方では、まったく新しいページ レイアウト方法であり、他方では、ク...

CSS3は小さな矢印のさまざまなグラフィック効果を実現します

CSS を使ってさまざまなグラフィックを実現できるのは素晴らしいことです。画像を切り取る必要はなく、...

MySQL の複合インデックスはどのように機能しますか?

目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...

Vue Element フロントエンドアプリケーション開発開発環境の準備

目次概要1. 必要なソフトウェア環境を開発する1) VSコードのインストール2) ノード開発環境をイ...

vue-pdf はオンラインファイルプレビューを実現します

この記事では、参考までに、ファイルのオンラインプレビューを実現するためのvue-pdfの具体的なコー...

ホワイトボードを踏まないようにするゲームを実装するための HTML+CSS+JS

目次背景1. 思考分析2. ページ構成2.1 HTML レイヤー2.2 CSS レイヤー2.3 JS...

Web インタビュー: MVC と MVVM の違いと、Vue が MVVM に完全に準拠していない理由

目次MVCとMVVMの違い前述のMVCC の概要長所と短所MVVM概要MVVM 実装者 — Vue ...

Javascript での JSBridge に関する予備的研究

目次JSBridgeの起源JSBridgeの双方向通信原理JSはネイティブを呼び出すネイティブコール...

MySQL で乱数を生成し、文字列を連結する方法の例

この記事では、MySQL が乱数を生成し、文字列を連結する方法について例を使用して説明します。ご参考...

HTML ファイルにフラッシュ ビデオ形式 (flv、swf) ファイルを埋め込む方法

Flash ファイル形式: .FLV および .SWFフラッシュ ビデオ形式には、.flv と .s...

CSS で垂直方向の中央揃えを行う 7 つの方法の詳細なコード例

レイアウトを編集するとき、通常は水平センタリングと垂直センタリングを使用してデザインします。水平セン...

Vue でスロットを使用する方法についての簡単な説明

定義と使用方法:コンポーネントのテンプレートでスロットタグの定義を使用します。デフォルトの表示値は、...

実稼働環境でのNginx高可用性ソリューションの実装プロセスの分析

準備: 192.168.16.128 192.168.16.129 2 台の仮想マシン。 Nginx...

Homebrewを使用してMacにMySQLをインストールするときにログインできない問題を解決する

お使いのコンピュータが Mac の場合、homebrew を使用して MySQL をインストールする...

CSS で background-color を使用して背景画像にマスク効果を追加する 2 つの方法

div で background-color と background-image を同時に設定する...